Title:
float 엘리먼트의 컨테이너의 height가 0이 되는 문제
|
edited by
Youngrok Pak
at
11 years, 2 months ago.
<div class="contents">
<h5>문제 상황</h5>
<p>div(이하 컨테이너) 안의 모든 엘리먼트에 float 이 지정된 경우 컨테이너는 아무것도 없는 것처럼 되어 납작해 집니다.(그림 1)</p>
<p><img class="attachment" title="ex.gif" src="http://ecolemo.springnote.com/pages/3962279/attachments/1996851" alt="ex.gif"> <img class="attachment" title="ex1.GIF" src="http://ecolemo.springnote.com/pages/3962279/attachments/1996853" alt="ex1.GIF"></p>
<p>그림 1. 원하는 화면 (왼쪽), 실제 화면(오른쪽)</p>
<p> </p>
<ol class="code">
<li>.container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; }<br> .box { float: left; border: 1px solid blue; width: 98px; }</li>
<li><div class="container"><br> <div class="box">box1</div><br> <div class="box">box2</div></li>
<li></div></li>
</ol>
<p> </p>
<p>이건 내부 엘리먼트가 float으로 뛰워져서 문서 흐름내에서 자리를 차지 하지 않기 때문입니다.</p>
<p>float 된 엘리먼트를 감싸고 있는 컨테이너가 원하는대로 화면에 표시되게 하기 위해서는 어디선가 float 를 해제해 줘야 합니다.</p>
<p>이를 위한 몇가지 방법이 있습니다.</p>
<h5>해결안</h5>
<h6>내부 엘리먼트에서 float 해재하기</h6>
<ol class="code">
<li>...</li>
<li><span style="color: #ff0103;">.clear { clear: both; }</span></li>
<li>...</li>
<li> <div class="box">box2</div></li>
<li style="margin-left: 2em;"><span style="color: #ff0103;"><div class="clear"></div></span></li>
<li></div></li>
</ol>
<p>이 방법을 쓰기 위해서는 내부 엘리먼트에서 clear 를 해줘야 합니다. 허나 clear 를 해줄 엘리먼트가 없기에 별도의 엘리먼트를 추가 해야 합니다. 내부에 clear 를 해줄 엘리먼트가 있으면 상관 없지만 이런 경우에는 float 해재를 위한 의미없는 마크업이 추가 됩니다.</p>
<p> </p>
<h6>컨테이너에도 float 적용하기</h6>
<ol class="code">
<li>.container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; <span style="color: #ff0103;">float: left;</span> }</li>
</ol>
<p>이 렇게 컨테이너에도 float 을 지정하면 원하는 결과를 만들 수 있습니다. 하지만 컨테이너를 float 시킴으로 인한 변화가 또 생기기 때문에 이를 해결해줄 필요가 생깁니다. 어떤 경우에는 컨테이너의 컨테이너... 이런 식으로 계속해서 float 을 적용시켜야 할 수도 있습니다.</p>
<p> </p>
<h6>컨테이너 overflow 속성에 hidden 값 지정하기</h6>
<ol class="code">
<li>.container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; <span style="color: #ff0103;">overflow: hidden;</span> }</li>
</ol>
<p>overflow 속성에 hidden 이나 auto 값을 주게되면 내부에 포함하고 있는 float 된 엘리먼트를 해제시킬 수 있습니다. 하지만 이 방식 역시 overflow 속성 지정에 따른 동작방식에 미치는 영향을 고려해야 합니다.</p>
<p> </p>
<h6>컨테이너 사이즈 지정하기</h6>
<ol class="code">
<li>.container { border: 1px solid red; width: 200px; margin: 0 auto; padding: 5px; <span style="color: #ff0103;">height: 20px;</span> }</li>
</ol>
<p>컨 테이너의 정확한 높이를 알고 있다면 위와 같이 height를 주어 해결할 수 있습니다. 보기에는 다른 방식들과 차이점이 없지만 실제로는 뛰워진 내부 엘리먼트를 감싸고 있는척 하는 것입니다. height 대신 padding 을 사용해도 같은 효과를 볼 수 있습니다. </p>
<p> </p>
</div>
WikiNamu