CSS float의 영역깨짐
[CSS] float:left로 인한 영역깨짐 해결방법
CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐(즉, height 값이 사라져 0이 되는 현상) 이 발생을 합니다.
이 에러를 잡기 위한 방법 4가지입니다.
1. 깨지는 영역에 똑같이 Float: left를 사용
- 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천 X
2. 깨지는 영역에 Clear: both를 사용
- 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천X
3. Float을 사용한 상위 박스에게 Overflow: hidden을 사용
- 현재 가장많이 사용하는 방법이지만 2단 메뉴 사용 시에는 사용 할 수 없음
.nav {overflow: hidden;}
.nav > div{ float: left;}
clearfix를 사용한다
- 이를 사용해서 특별한 문제점이 발생되지 않아 제일 많이 사용하는 방법
- Float 속성을 Clearfix 하기 위해서 가상 선택자 ::after를 사용하면 된다. Float 속성을 적용한 요소들의 부모 컨테이너에 다음과 같은 ::after 스타일을 추가한다.
clearfix::after {content:''; display:block; clear:both;}