CSS float 레이아웃이 깨지는 이유

Question

CSS float로 2단 레이아웃을 만들었는데 부모 요소의 높이가 0이 됩니다. ```css .sidebar { float: left; width: 30%; } .content { float: left; width: 70%; } ``` 부모 div에 배경색을 넣었는데 안 보이고, 아래 footer가 위로 올라옵니다. float를 쓰면 항상 이런 건가요?

김영삼 · Accepted Answer

float된 자식 요소는 부모의 높이 계산에서 빠집니다. clearfix를 적용하시면 됩니다.

```css
.parent::after {
content: "";
display: table;
clear: both;
}
```

또는 부모에 `overflow: hidden;`을 주는 방법도 있습니다. 2018년 기준으로는 Flexbox를 쓰시는 게 훨씬 편합니다.

```css
.parent { display: flex; }
.sidebar { width: 30%; }
.content { width: 70%; }
```

Flexbox는 IE11에서도 지원되니 실무에서 써도 괜찮습니다.

웹퍼블리셔 · Answer

clearfix 적용하니 바로 해결됐습니다. Flexbox도 배워봐야겠네요. 감사합니다!

댓글 2