CSS

게시글 'falot:left 일때 블록 엘리먼트가 height가 0px 현상'에 대한 정보
falot:left 일때 블록 엘리먼트가 height가 0px 현상
등록일 2011-10-09 조회 3,885

<style type="text/css">
.Element{width:200px; border:1px solid #000;}
.Element div{float:left; width:50px; border:1px solid #ddd;}
</style>

<div class="Element">
 <div>A</div>
 <div>B</div>
</div>

<div class="Element">
 <div>A</div>
 <div>B</div>
</div>


위처럼 퍼블리싱 될경우 IE브라우저 및 IE6~7버전 상위에서 높이가 0이 되어 백그라운드 이미지를 넣을경우 정상적이지 않다. 때문에 아래처럼 퍼블리싱해주어 해결한다.

<style type="text/css">
.Element{width:200px; border:1px solid #000;}
.Element div{float:left; width:50px; border:1px solid #ddd;}
.Element:after{content:""; display:block; clear:both;}
</style>

<div class="Element">
 <div>A</div>
 <div>B</div>
</div>

<div class="Element">
 <div>A</div>
 <div>B</div>
</div>