[CSS]float 이해하기 & clear하는 방법

1. float 이해하기

우선 float의 작성 방법입니다. 

div{float:left;}
div{float:right;}
div{float:both;}

이렇게 float는 왼쪽, 오른쪽, 양쪽으로 사용가능합니다. 객체를 어느쪽으로 띄울 것인가 결정하는것인데, 보통은 문서을 왼쪽에서 오른쪽으로 읽기 때문에 float:left의 사용빈도가 높습니다. 

float를 사용하는 방법에 대해 좀 더 설정하자면!

float는 블록상태의 객체를 정렬할때 많이 사용하는 속성입니다. 블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없습니다. 그럴때 사용하는 속성 중 하나가 float입니다. 

블록요소인 div 태그는 한자리 가득 차지 하고 있습니다.  

다른 요소와 나란히 놓기 위해 css에 float를 줍니다. 그러면 div의 가로값은 최소 크기로 변경됩니다. float상태가 된 div의 크기가 줄면서 빈공간이 생기고 그 빈공간에 뒤에 있던 오렌지 div가 올라오게 됩니다.

 

그럼 이렇게 2개의 요소가 같은 라인에 놓여지게 됩니다. (그린 div만 float 상태)

두 개의 div에 모두 float를 주면 모두 최소 크기로 변경되면서 빈공간이 생기고 그 뒤에 또다른 객체가 있다면 따라 올라오게 됩니다.

보충설명

그냥 가로(width)를 각각 지정해주면 요소들을 나란히 놓을 수 있을 것 같지만 실제로는 이런상태가 됩니다. 

div는 가로값을 지정해줘도 한자리를 다차지 하는 블록요소의 속성을 가지고 있기 때문에 두개의 요소를 같이 놓을 빈공간

이 있어보지만 사실은 빈공간이 없습니다. 

이렇게 한자리를 다 차지한 상태입니다. 

2. float를 clear하는 4가지 방법 

그런데 div에 float속성을 주면 문제가 발생합니다. 요소가 float상태는 말 그대로 요소가 둥둥 떠있는 상태입니다. 앞에 요소가 떠있기 때문에 그 다음에 있는 요소가 그 자리가 비었다고 생각하고 그 자리로 올라오게 됩니다. 

↓3개의 div중 2개(div.green, div.orange)만 float:left 적용

이렇게 3번째로 있던 보라 div는 위에 요소가 다 떠있기 때문에 그 자리가 비었다고 생각하고 그 자리를 차지하게 됩니다. 

또한 부모의 자식들이 모두 float상태일때 부모는 자식이 인식하지 못하고 height값을 찾지 못합니다. 

이런 문제점을 해결해주는 방법은 4가지가 있습니다. 

1. float으로 대응하기

앞에 요소가 float인 상태에서 뒤에 요소가 float이 아닐 경우 이런 문제가 발생하기 때문에 그 다음 요소 역시 float 상태로 바꿔주면 해결된다. 하지만 이건 그 뒤에 요소들에게도 동일한 문제가 발생하기 때문에 완전한 해결책이라고 볼 수 없다. 위에 예시처럼 오렌지div가 float:left가 적용되어 있기 때문에 그린div옆으로 위치를 잡지만 그 다음요소인 보라div는 동일한 문제가 발생한다.

2. 부모에게 overflow:hidden 사용하기

자식요소가 float인 부모에게 overflow:hidden을 주면 부모가 자식을 담아냅니다. 다만, 이 방법은 내용이 넘치면 안보이기 때문에 한계가 있습니다. 

ex)

 <style>
     div.wrap{overflow: hidden}
     div.box1, div.box2{float: left}
 </style>
 <div class="wrap">
      <div class="box1"></div>
      <div class="box2"></div>
 </div>

3. 빈요소에 clear:both 넣기

float된 요소 밑에 빈 임의의 요소를 만들어 clear:both를 줍니다. clear는 취소하다는 뜻으로 float를 취소시킵니다. 이건 마크업의 흐름을 깨기 때문에 권장하는 방법이 아닙니다.

ex) 

 <style>
     div.box1, div.box2{float: left}
     br.clear{clear:both}
 </style>
 
      <div class="box1"></div>
      <div class="box2"></div>
  <br class="clear">

4. 가상요소 ::after 사용하기

부모요소에게 ::after를 사용하며 가상요소를 만들어 줍니다. 그리고 가상요소에게 display:block 요소를 적용해 한 줄 가득차게 합니다. 그리고 빈 콘텐츠를 넣어주고, clear를 적용시켜줍니다. 부모 뒤에 보이지 않는 가상요소를 만들어 뒤에 요소가 위로 따라 올라가지 않게 해줍니다. 가장 많이 사용하는 방법입니다.

<style>
     div.clearfixed::after{display:block;content:"";clear:both}
     div.box1, div.box2{float: left}
</style>
<div class="clearfixed">
      <div class="box1"></div>
      <div class="box2"></div>
</div>