clearfixとは
まずclearfixとはfloatを使用する際にレイアウトが崩れないようにするものです。 floatは要素を隣に並べたり、文字を回り込ませたいときに指定するプロパティですが float（浮かせる）要素のため、次の要素が下に潜り込んでしまったりと レイアウトが崩れることがあります。 そのレイアウトを崩れないようにするのがclearfixの役目です。「 浮いた要素のバリア機能」とイメージすると分かりやすいと思います。
clearfixを指定することにより、浮いた要素にバリアのようなものを張ることができ、 浮いた要素に他の要素が回り込むのを防ぐことが出来るようになります。
使い方
このようなブロックを作りたいとき
SETP.01-HTMLで要素を囲む
<body>
<div class="clearfix">
<div class="green"></div>
<div class="yellow"></div>
</div>
<div class="red"></div>
</body>
<div class="clearfix">
<div class="green"></div>
<div class="yellow"></div>
</div>
<div class="red"></div>
</body>
☆この時、一番下の要素は浮かせないため囲いません
SETP.02-CSSでclearfixを指定する
BMBではクラス名にclearfixと書くとYUIresetからcssを読み込んでくれるので 自分で記述しなくても大丈夫です。
clearfixに書かれている内容 YUIreset.cssには以下の通りに書かれています。
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table;min-height:1px}
この記述があれば回り込みを解除してくれます。
clearfixがそもそも効かない場合は YUIreset.cssにこの記述があるかの確認をお願いします。
☆基本的にreset.cssは触らないようにしましょう
注意点
clearfixには隙間ができる
clearfixには隙間ができるため、一番下の要素を浮かせるときにはclearfixは書かないようにしましょう。
まとめ
floatとclearfixが使いこなせるようになると便利なことがたくさんありますが、 機能を理解していないとレイアウトが崩れたりレスポンシブにしたときに無理が出たりするので 一つ一つ理解していっていただけたらと思います。
またclearfixについて疑問点や追加したほうがいいことがありましたらコメント欄にお願いいたします✐☡
株式会社ビーエムビー
〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX：03-5948-5996
東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP（ランディングページ）の作成、ECサイト（楽天ストアなど）の構築などのWEBデザイン、チラシ･ポスター･名刺･パンフレット･看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトを、フルスクラッチにて構築することが可能です。お気軽にお問い合わせください。