CSS float 영역 깨짐 현상

float 영역 깨짐 현상이란?

CSS3에서 레이아웃 작업을 하다가 float:left를 사용하면 영역의 height값이 사라지는 깨짐 현상이 나타난다.

영역 깨짐 현상 방지방법

  • 깨지는 영역에 float:left 사용

    • 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워지므로 사용하지 않는 것이 좋다.

  • 깨지는 영역에 Clear: both를 사용

    • 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 사용하지 않는 것이 좋다.

  • Float을 사용한 상위 박스에게 Overflow: hidden을 사용

    • 현재 가장 많이 사용되는 방법이지만, 2단 메뉴 사용 시에는 사용 할 수 없다.

  • clearfix를 사용

    • 특별한 문제점이 발생되지 않아 제일 많이 사용하는 방법이다.

    Float 속성을 Clearfix 하기 위해서 가상 선택자 ::after를 사용하면 된다. Float 속성을 적용한 요소들의 부모 컨테이너에 ::after 스타일을 추가하여 사용한다.