[CSS] floatの浮動化を解除するclearfix

  CSS ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
CSS float clearfix

WEBサイトをレイアウトする際に、よくfloatプロパティを用いると思います。
レスポンシブルデザインにおいても、各デバイス(パソコン・タブレット・スマートフォンなど)でデザインを変化させるために、とても重要であると言えます。
しかし、floatを使用すると浮動化されて「divなどの親の背景が表示されない」「下のレイアウトが崩れる」などの様々な問題が生じてきます。
そこで今回、floatの浮動化を解除するclearfixについてご紹介していきたいと思います。

floatが浮動化されたままの場合

floatの浮動化

HTMLの記述例

<div id="box">
    <div id="boxA">
    </div>
    <div id="boxB">
    </div>
</div>

CSSの記述例

#box{
	border:1px solid #000000;
	background-color:#00FF00;
}
#boxA{
   float: left;
   width: 30%;
   height: 300px;
   background-color:#FF0000;
}
#boxB{
   float: left;
   width: 65%;
   height: 300px;
   margin-left:5%;
   background-color:#0000FF;
}

浮動化の解除をしていない場合、緑の親の背景である緑色が表示されていないことがわかると思います。わかりづらいので、黒い枠線を付けてあります。
「赤いdivタグのboxA」と「青いdivタグのboxB」をfloatで浮動化させています。
図を見ていただくと分かるように、親の背景が表示されずレイアウトの崩れが生じる状態となっています。
下記に解除方法についてご紹介していきます。

clearの記述方法

clearによるfloat解除

HTMLの記述例

<div id="box">
    <div id="boxA">
    </div>
    <div id="boxB">
    </div>
    <div class="clear"></div>
</div>

CSSの記述例

.clear {
   clear: both;
   height: 60px;
   background: ##FF66CC;
}
#box{
   background-color:#00FF00;
}
#boxA{
   float: left;
   width: 30%;
   height: 300px;
   background-color:#FF0000;
}
#boxB{
   float: left;
   width: 65%;
   height: 300px;
   margin-left:5%;
   background-color:#0000FF;
}

浮動化をclearで解除をする場合、緑の親の背景である緑色が表示されていることがわかると思います。
「赤いdivタグのboxA」と「青いdivタグのboxB」をfloatで浮動化させて、ピンク色のclearボックスで解除しています。
図を見ていただくと分かるように、clearボックスが必要な状態となっています。
イメージとしてはローラーブラインドを引っ掛けるストッパーを別に必要とするようなものです。
clearボックスが空のボックスである場合、役割を持たないため推奨されません。

clearfixの記述方法

clearfixによるfloat解除

HTMLの記述例

<div id="box" class="clearfix">
    <div id="boxA">
    </div>
    <div id="boxB">
    </div>
</div>

CSSの記述例

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

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
}
#box{
   background-color:#00FF00;
}
#boxA{
   float: left;
   width: 30%;
   height: 300px;
   background-color:#FF0000;
}
#boxB{
   float: left;
   width: 65%;
   height: 300px;
   margin-left:5%;
   background-color:#0000FF;
}

浮動化をclearfixで解除をする場合、緑の親の背景である緑色が表示されていることがわかると思います。
「赤いdivタグのboxA」と「青いdivタグのboxB」をfloatで浮動化させて、親のdivタグのclearfixで解除しています。
HTMLを見ていただくと分かるように、すっきりとした状態となっています。
イメージとしてはローラーブラインドを窓に引っ掛けたようなものです。

SNSでもご購読できます。

コメントを残す

*