CSS float으로 2단 레이아웃을 만들었는데 부모 div의 높이가 0이 됩니다. 배경색도 안 보이고 아래 요소가 올라옵니다.
float된 자식은 부모의 높이 계산에서 제외됩니다. clearfix를 적용하세요:
/* 가장 많이 쓰는 clearfix */.clearfix::after { content: ""; display: table; clear: both;}
<div class="clearfix"> <div style="float:left; width:50%">왼쪽</div> <div style="float:left; width:50%">오른쪽</div></div>
참고로 2018년 현재 Flexbox를 쓰면 float 없이도 레이아웃을 쉽게 만들 수 있습니다.
댓글 2
float된 자식은 부모의 높이 계산에서 제외됩니다. clearfix를 적용하세요:
참고로 2018년 현재 Flexbox를 쓰면 float 없이도 레이아웃을 쉽게 만들 수 있습니다.