clearfix

after擬似要素を利用してclear
floatさせている画像やボックスなどの子要素。その子要素を包んでいるはずの親要素が子要素を包んでくれないケース

floatを使った際の表示の崩れを正すためによく使われる clearfix

div:after { 
content: "."; 
display: block; 
visibility: hidden; 
height: 0.1px; 
font-size: 0.1em; 
line-height: 0; 
clear: both; 
}

floatしている要素を囲っている親要素divにclearfixを入れる。

html
<div class="content clearfix">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
.content{
 width: 600px;
 height: auto;
 border: 3px solid #ED1A3D;
}

#left{
 width: 100px;
 height: 200px;
 float: left;
 border: 3px solid #fff000;
}

#right{
 width: 488px;
 height: 200px;
 float: left;
 border: 3px solid #000ddd;
}

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

.clearfix { display: inline-table; }