このページでは、clearfixについて解説していきます。
例えば以下のようにboxを並べたとします。
<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>
#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;を使用するのですが
float:left;をするとそのboxは存在しないものとして扱われてしまいます。
今回の場合、box4が並んでいるbox2とbox3の上にきて重なってしまいます。
そこでfloat:left;をした後に影響を与えないようにする文言がclearfixです。
どのようなものか少しみていきましょう。
以下のような状態になります。
<div id="box1"> <p>box1</p> </div> <div class="A"> <div id="box2"> <p>box2</p> </div> <div id="box3"> <p>box3</p> </div> </div> <div id="box4"> <p>box4</p> </div>
box2とbox3を括る新しいdiv,classを作りました。
#box2 {
background-color: #00ff00;
height: 100px;
width: 100px;
float: left;
}
#box3 {
background-color: #0000ff;
height: 100px;
width: 100px;
float: left;
}
.A:after {
content: "";
display: block;
clear: both;
}
box1とbox4は変わりません。
このようにして後に影響を与えることなくboxを並べる事ができます。
以上
