float된 엘리먼트와 감싸는 블럭의 백그라운드 문제

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