CSS 부모 height 0 되는 현상

1 개요

CSS 부모 height 0 되는 현상

• div의 기본 display 속성은 block임
• 자식 요소들이 모두 float:left 이면 부모의 height가 0이 됨
• 부모요소에 display:inline-block 또는 overflow: hidden 스타일을 주면 자식을 포함하는 height가 됨

2 예시

<div style='background: red;'>
  <div style='float: left; background: orange;'>Hello</div>
  <div style='float: left;'>World</div>
  <div style='float: left;'>Test</div>
</div>
<hr style='clear:both'>
<div style='background: red; display: inline-block;'>
  <div style='float: left; background: orange;'>Hello</div>
  <div style='float: left;'>World</div>
  <div style='float: left;'>Test</div>
</div>
<hr style='clear:both'>
<div style='background: red; overflow: hidden;'>
  <div style='float: left; background: orange;'>Hello</div>
  <div style='float: left;'>World</div>
  <div style='float: left;'>Test</div>
</div>

→ 부모 div의 height가 자식 div 영역을 포함하는 경우 배경색이 빨간색으로 보임

3 같이 보기

• CSS display
• CSS float