継続は力なり＃４１

2020年4月10日 23:32

clearfix について

フロートで不都合なこと

フロートをクリアするための特殊なCSSテクニック「clearfix」について
「float プロパティ」や「clear プロパティ」は、元々画像などの横にテキストを回り込ませる目的で用意されたものなので、それを段組みのようにボックスを横に並べる目的で使用していると不都合が生じることがある

例

HTML

<div id="contents">
 
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>
 
<div id="sub">
サブのテキストです。
サブのテキストです。
サブのテキストです。
</div>
 
</div>

CSS

 #contents {
   margin: 0 auto;
   width: 300px;
}
 
main {
   float: right;
   width: 200px;
   color: #fff;
   background: #fc0;
}
 
#sub {
   float: left;
   width: 100px;
   color: #fff;
   background: #390;
}

では、#contents に赤いボーダーを表示させて、全体を囲ってみる
CSSの #contents に対する指定のところに、次のようにボーダーを表示させる指定を追加する

CSS

 #contents  {
   margin: 0 auto;
   width: 300px;
   border: 10px solid red;
}

ソースコードを保存しブラウザで再表示させると、ボーダーは上記のように表示されてしまった
赤いボーダーが全体を覆うように表示されないのは何故か？

フロートを指定した要素は親要素からはみ出す

実は、float 指定した要素のボックスは、それを含む要素のボックスの高さとは無関係になっていて、そこからはみ出す仕様となっている
上のサンプルでは、#contents の内容は２つとも float が指定されているので #contents からはみ出し、#contents の高さは０になっている
画像の横にテキストを回り込ませるという本来の機能を考えると理解できる
例として、以下の画像は、２つの段落のうち１つ目の段落の先頭に画像を入れて、それに「 float: right; 」を指定したものである
ボックスの状態が分かりやすいように赤いボーダーとグレーの背景を指定している

では、このウィンドウを横に広げて、２つ目の段落が画像の横に回るこむ様子を見てみる
画像は１つ目の段落のボックスをはみ出し、２つ目の段落に入り込んでいる
ボックスの形状は常に四角形であるため、画像の横に後続のボックスのテキストを回り込ませるには、フロートした画像は以下のようにボックスからはみ出る必要がある

clearプロパティを使用した場合の不都合

単純にコンテンツを2段組にするだけであれば、このような仕様でも特に問題ないかもしれない
だが、段組み部分を囲う親ボックスにボーダーを表示させたり背景を表示させたりして、その中のフロートさせた要素がすっぽりと収まるようにしたい場合には、少し手間がかかる

例として、段落部分の親要素となっている要素の直後で（ main要素の直後の footer要素などで）フロートをクリアしても、フロートがはみ出す状態に変化はない
フロートがその親要素からはみ出ないようにするためには、親要素の内部において、floatプロパティが指定されている要素よりも後にブロックレベル要素を追加して、その要素でフロートをクリアさせる必要がある
（ clearプロパティはブロックレベル要素にしか適用できない仕様になっている）
本来は必要ないブロックレベル要素を、表示方法の制御のために追加する必要があるということになる
最もスマートな、CSSだけで完結するような方法はないのか？