float:left, float:right 속성의 엘리먼트만을 포함한 블럭에 백그라운드를 적용했을때,
float된 컨텐트의 높이를 잡아주지 못해서 백그라운드가 적용되지 않는다.
1. firefox의 경우
overflow:auto;를 하면 자동 클리어
(IE에 적용이 안됨)
2. firefox와 IE
overflow:auto;
height:지정;
양 브라우저에 모두 적용되지만, 플로우트된 엘리먼트가 지정한 height 값을 넘을 경우 스크롤이 생긴다.
- 적용 예 : 높이가 정해진 디자인에 사용 가능
ex)
.titleLine {
overflow:auto;
height:20px;
border-bottom:1px solid #ddd;
}
.titleLine h1{
float:left
}
.titleLine .more {
float:right;
}
<div class="titleLine">
<h1>공지사항</h1>
<div class="more">더보기</div>
</div>
단, 이 경우 텍스트 크기가 유동적일때를 감안한 높이를 적용해주어야한다.
3. firefox와 IE 모두
플로우트된 엘리먼트 바로 다음에 <br style="clear:both;" />를 추가한다.
.titleLine {
overflow:auto;
height:20px;
border-bottom:1px solid #ddd;
}
.titleLine h1{
float:left
}
.titleLine .more {
float:right;
}
.titleLine br {
clear:both;
}
<div class="titleLine">
<h1>공지사항</h1>
<div class="more">더보기</div>
<br />
</div>
<br style="clear:both;" />의 경우 ie에서 작동 안됨, <div style="clear:both"></div> 추가해야함
참고, 더보기 : hyeonseok.com
webdesign/CSS