下の図を見てください:
<style type="text/css">
#box1 { margin: 4px; padding: 10px; font-size:24px; background: #aaa; color:#fff; }
#box2 { width: 129px; float: left; height: 120px;
background: lime; font-size:24px; background: #5ce; color:#fff; }
#box3 { clear:both; margin: 4px; padding: 10px; font-size:24px; background: #e58; color:#fff; }
</style>
<div id="box1">
<div id="box2">#box2</div>
#box1
</div>
<div id="box3">
#box3
</div>
box2は、box1からはみ出して表示されていますが、実際のHTMLのレイアウトでは、box2をbox1に含めたいというケースがあります。
このためには、幾つかのやり方があります。例えば、次のようにbox2の後にダミーの要素を追加し、このダミ－要素に clear:leftを設定する方法が考えられます。
<style type="text/css">
#box1 { margin: 4px; padding: 10px; font-size:24px; background: #aaa; color:#fff; }
#box2 { width: 129px; float: left; height: 120px;
background: lime; font-size:24px; background: #5ce; color:#fff; }
#box3 { clear:both; margin: 4px; padding: 10px; font-size:24px; background: #e58; color:#fff; }
#clear{ clear:left; display:block; } /* 追加 */
</style>
<div id="box1">
<div id="box2">#box2</div>
#box1
<span id="clear"></span> <-- 追加 -->
</div>
<div id="box3">
#box3
</div>
ただし、この方法では、レイアウトを変更するために元のHTML文書を変更しなければなりません。そこで、同様の作業を CSSのみで実装するclearfixと言う手法が利用されています。
次のようなスタイルを定義します。
.clearfix::after {
content: ".";
display: block;
clear: both;
height: 6px;
}
そして、次のようにbox1にスタイルを適用します。
<div id="box1" class="clearfix"> <div id="box2">#box2</div> #box1 </div>
<style type="text/css">
#box1 { margin: 4px; padding: 10px; font-size:24px; background: #aaa; color:#fff; }
#box2 { width: 129px; float: left; height: 120px;
background: lime; font-size:24px; background: #5ce; color:#fff; }
#box3 { clear:both; margin: 4px; padding: 10px; font-size:24px; background: #e58; color:#fff; }
.clearfix::after { content: "."; display: block; clear: both; height: 0px; visibility: hidden; }
</style>
<div id="box1" class="clearfix">
<div id="box2">#box2</div>
#box1
</div>
<div id="box3">
#box3
</div>