clearfixで指定するfloatの解除｜上級CSSレイアウト講座

Loading

スポンサードリンク

CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。

例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。

一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。

以下にサンプル解説します。

サンプルソースと通常指定

<div id="mainbox"> <!-- 親要素 -->
<div id="box-a"> *** </div> <!-- float -->
<div id="box-b"> *** </div> <!-- float -->
<div id="box-c"> *** </div> <!-- clear -->
</div>
#mainbox{
  width: 800px;
  margin: 0 auto;
  background: url(***) repeat-y 0 0;
}

#box-a{
  width: 600px;
  float: right;
}

#box-b{
  width: 200px;
  float: left;
}

#box-c{ clear: both; }

通常指定サンプルの表示

親要素内でfloatを解除しなかった場合の例

<div id="mainbox"> <!-- 親要素 -->
<div id="box-a"> *** </div> <!-- float -->
<div id="box-b"> *** </div> <!-- float -->
</div>
#mainbox{
  width: 800px;
  margin: 0 auto;
  background: url(***) repeat-y 0 0;
}

#box-a{
  width: 600px;
  float: right;
}

#box-b{
  width: 200px;
  float: left;
}

親要素内でfloatを解除しなかった場合のサンプル表示

clearfixの指定とサンプルソース

<div id="mainbox" class="clearfix"> <!-- 親要素 -->
<div id="box-a"> *** </div> <!-- float -->
<div id="box-b"> *** </div> <!-- float -->
</div>
#mainbox{
  width: 800px;
  margin: 0 auto;
  background: url(***) repeat-y 0 0;
}

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

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

#box-a{
  width: 600px;
  float: right;
}

#box-b{
  width: 200px;
  float: left;
}

clearfixを指定した場合のサンプル表示

参考文献

スポンサードリンク