nicepaper @ ウィキ
nicepaper @ ウィキ

このページでは、clearfixについて解説していきます。
例えば以下のようにboxを並べたとします。

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;を使用するのですが float:left;をするとそのboxは存在しないものとして扱われてしまいます。
今回の場合、box4が並んでいるbox2とbox3の上にきて重なってしまいます。
そこでfloat:left;をした後に影響を与えないようにする文言がclearfixです。
どのようなものか少しみていきましょう。
以下のような状態になります。

HTML 

<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を作りました。

CSS 

#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を並べる事ができます。

以上

「CSSでclearfix」をウィキ内検索
最終更新：2015年08月16日 12:01