[CSS] 유동속성(float)

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

속성값으로 left, right, none, inherit가 있다.

inherit는 많이 사용하지 않기 때문에 inherit를 제외하고 살펴보자.

 

말로 하면 이해가 어려울 수 있고 예제로 보면 쉽기 때문에

이번 게시물에서는 예제를 중심으로 설명할 예정이다.

 

right/left

right와 left의 차이는 오른쪽에 띄우느냐, 왼쪽에 띄우느냐의 차이이다.

img {
  float: right;
}

 

none

none은 이미지가 텍스트의 한 줄을 차지한다. default값이다.

img {
  float: none;
}

---

float속성은 이렇게 이미지를 배치할 때도 많이 쓰지만

최근에는 <div>태그나 리스트에서 자주 사용한다.

 

왜냐하면, div태그는 따로 설정해주지 않으면 하나의 영역을 차지하고 자동으로 줄바꿈 된다.

그렇기 때문에 div태그를 여러번 쓰면 아래로 나열이 되는데

 

우리가 이를 가로로 나열하고 싶을 때 float속성을 사용할 수 있다.

div {
  float: left;
  padding: 15px;
}

 

float를 사용할 때, 알아두면 좋은 점은

보통 자손에게 float 속성을 지정하면, 부모의 overflow 속성에는 hidden 키워드를 적용한다는 점이다.

<p>In this example, the three divs will float next to each other.</p>
<div class="menu">
	<div class="item">Div 1</div>
	<div class="item">Div 2</div>
	<div class="item">Div 3</div>
</div>
<p>In this example, the three divs will float next to each other.</p>

 

위 HTML코드에 스타일을 적용해보자.

overflow의 속성이 없으면 아래 그림처럼 menu클래스의 div태그가 한 줄을 차지하지않고

아래의 p태그가 위로 올라오게 된다.

 

물론 이 레이아웃을 의도했을 수도 있지만,

대부분의 div태그는 영역을 차지하기 때문에 이를 의도하지 않는경우가 많다.

div.item {
  float: left;
  padding: 15px;
  border:1px solid black;
}

 

이에 대한 해결책으로,

부모 div 태그에다가 overflow속성에 hidden 값을 넣어주면

div 태그가 의도한대로 한 줄을 차지하게 된다.

div.item {
  float: left;
  padding: 15px;
  border:1px solid black;
}

div.menu {
	overflow:hidden;
}