「CSSでclearfix」の編集履歴（バックアップ）一覧はこちら
CSSでclearfix - (2015/08/16 (日) 11:56:38) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
このページでは、clearfixについて解説していきます。~
例えば以下のようにboxを並べたとします。~
#image(width=150,clear_before.png)
*HTML
<body>
<div id="box1">
<p>box1</p>
</div>
<div id="box2">
<p>box2</p>
</div>
<div id="box3">
<p>box3</p>
</div>
<div id="box4">
<p>box4</p>
</div>
</body>
*CSS
#box1 {
background-color: #ff0000;
height: 100px;
width: 200px;
}
#box2 {
background-color: #00ff00;
height: 100px;
width: 200px;
}
#box3 {
background-color: #0000ff;
height: 100px;
width: 200px;
}
#box4 {
background-color: #ffff00;
height: 100px;
width: 200px;
}
ここでbox2とbox3を並べてみたいと思います。~
その際に、float;left;を使用するのですが&color(red){float:left;をするとそのboxは存在しないものとして扱われてしまいます。}~
今回の場合、box4が並んでいるbox2とbox3の上にきて重なってしまいます。~
そこでfloat:left;をした後に影響を与えないようにする文言がclearfixです。~
どのようなものか少しみていきましょう。~
以下のような状態になります。
このページでは、clearfixについて解説していきます。~
例えば以下のようにboxを並べたとします。~
#image(width=150,clear_before.png)
*HTML
<body>
<div id="box1">
<p>box1</p>
</div>
<div id="box2">
<p>box2</p>
</div>
<div id="box3">
<p>box3</p>
</div>
<div id="box4">
<p>box4</p>
</div>
</body>
*CSS
#box1 {
background-color: #ff0000;
height: 100px;
width: 200px;
}
#box2 {
background-color: #00ff00;
height: 100px;
width: 200px;
}
#box3 {
background-color: #0000ff;
height: 100px;
width: 200px;
}
#box4 {
background-color: #ffff00;
height: 100px;
width: 200px;
}
ここでbox2とbox3を並べてみたいと思います。~
その際に、float;left;を使用するのですが&color(red){float:left;をするとそのboxは存在しないものとして扱われてしまいます。}~
今回の場合、box4が並んでいるbox2とbox3の上にきて重なってしまいます。~
そこでfloat:left;をした後に影響を与えないようにする文言がclearfixです。~
どのようなものか少しみていきましょう。~
以下のような状態になります。
#image(width=150,clear_after.png)
