Float으로 인한 영역 깨짐(height: 0)을 방지하는 방법 (클리어픽스)

 

 

Float을 사용하게 되면 영역이 깨지는 즉, Height 값이 사라져 0이 되는 현상이 나타납니다.

 

이를 방지하기 위한 방법을 아래에 적어 보겠습니다.

 

 

---

 

Float으로 인한 영역 깨짐(Height: 0)을 방지하는 방법

 

 

깨지는 영역에 똑같이 Float: left를 사용

 

- 위 방법을 사용하게 되면 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천하지 않습니다.

 

 

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

 

- 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다.

 

 

 

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

 

- 2단 메뉴 사용 시에는 사용 할 수 없어 추천하지 않습니다.

 

 

 

부모요소에 Display:inline-block을 사용

 

- 이를 사용하면 박스의 성질 자체가 달라지기 때문에 이전에 작성한 태그의 결과물이 달라 질 수 있어 추천 하지 않습니다.

 

 

Clearfix를 만들어 class로 사용 (추천)

 

- 이를 사용해서 특별한 문제점이 발생되지 않아 제일 많이 사용하는 방법입니다. 
- 아래와 같이 clearfix를 만들어 클래스로 사용하면 됩니다.

 

.clearfix::before, .clearfix::after {content: ''; display: block; clear: both;}