float 속성 clear하는 방법

float은 HTML의 요소를 Document로 부터 띄어주기 때문에 레이아웃을 짤 때 많이 사용하는 속성인데요. 원래의 용도는 텍스트(인라인 요소)와 배치할 때 사용했습니다. 지금은 flexbox라는 더 좋은 아이가 있기 때문에 flexbox로 레이아웃 만드는게 훨씬 편하긴 합니다.

float 속성을 사용하면 요소가 붕 뜨게 되어 레이아웃 구조가 이상해질 수 있는데 그것을 막기 위해서는 꼭 clear를 해주어야 합니다.

float을 해제하는 방법은 총 6가지가 있습니다.

1. float된 요소의 부모 태그에 강제로 높이를 지정해줍니다.
   이 방법은 반응형 시 자동 높이 값 설정이 안된다는 단점이 있습니다.

2. float된 요소의 부모 태그에 overflow:hidden을 적용해줍니다.
   이 방법은 해당 요소 안의 컨텐츠를 박스 외부로 표현해 줄 수 없다는 단점이 있습니다.

3. float된 요소의 부모 태그에 overflow:auto를 적용해줍니다.
   이 방법은 특정 브라우저에서 스크롤 바가 표시되는 단점이 있습니다.

4. float된 요소의 부모 태그에 float을 또 설정해줍니다.
   이 방법은 가운데 배치가 불가능하다는 단점이 있습니다.

5. float된 요소의 다음에 나오는 태그에 clear:both를 지정합니다.
   이 방법은 clear:both가 적용된 요소에 margin-top 적용이 안되는 단점이 있습니다.

6. float된 요소의 부모 태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다. (권장)

• 가상 요소 ::after

float된 요소의 부모 태그::after {
    content: '';
    display: block;
    clear: both;
}

clearfix라는 클래스명을 가진 div를 만들어 놓고 clearfix 안에 위에 속성을 주고 float된 요소의 부모 태그에 clearfix 클래스명을 추가해 주면 편합니다.