float 엘리먼트의 컨테이너의 height가 0이 되는 문제

문제 상황#

div(이하 컨테이너) 안의 모든 엘리먼트에 float 이 지정된 경우 컨테이너는 아무것도 없는 것처럼 되어 납작해 집니다.(그림 1)

그림 1. 원하는 화면 (왼쪽), 실제 화면(오른쪽)

 

1. .container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; }
   .box { float: left; border: 1px solid blue; width: 98px; }
2. <div class="container">
       <div class="box">box1</div>
       <div class="box">box2</div>
3. </div>

 

이건 내부 엘리먼트가 float으로 뛰워져서 문서 흐름내에서 자리를 차지 하지 않기 때문입니다.

float 된 엘리먼트를 감싸고 있는 컨테이너가 원하는대로 화면에 표시되게 하기 위해서는 어디선가 float 를 해제해 줘야 합니다.

이를 위한 몇가지 방법이 있습니다.

해결안#

내부 엘리먼트에서 float 해재하기#

1. ...
2. .clear { clear: both; }
3. ...
4.     <div class="box">box2</div>
5. <div class="clear"></div>
6. </div>

이 방법을 쓰기 위해서는 내부 엘리먼트에서 clear 를 해줘야 합니다. 허나 clear 를 해줄 엘리먼트가 없기에 별도의 엘리먼트를 추가 해야 합니다. 내부에 clear 를 해줄 엘리먼트가 있으면 상관 없지만 이런 경우에는 float 해재를 위한 의미없는 마크업이 추가 됩니다.

 

컨테이너에도 float 적용하기#

1. .container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; float: left; }

이 렇게 컨테이너에도 float 을 지정하면 원하는 결과를 만들 수 있습니다. 하지만 컨테이너를 float 시킴으로 인한 변화가 또 생기기 때문에 이를 해결해줄 필요가 생깁니다. 어떤 경우에는 컨테이너의 컨테이너... 이런 식으로 계속해서 float 을 적용시켜야 할 수도 있습니다.

 

컨테이너 overflow 속성에 hidden 값 지정하기#

1. .container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; overflow: hidden; }

overflow 속성에 hidden 이나 auto 값을 주게되면 내부에 포함하고 있는 float 된 엘리먼트를 해제시킬 수 있습니다. 하지만 이 방식 역시 overflow 속성 지정에 따른 동작방식에 미치는 영향을 고려해야 합니다.

 

컨테이너 사이즈 지정하기#

1. .container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; height: 20px; }

컨 테이너의 정확한 높이를 알고 있다면 위와 같이 height를 주어 해결할 수 있습니다. 보기에는 다른 방식들과 차이점이 없지만 실제로는 뛰워진 내부 엘리먼트를 감싸고 있는척 하는 것입니다. height 대신 padding 을 사용해도 같은 효과를 볼 수 있습니다.