継続は力なり＃４２

2020年4月11日 21:58

前回の続き

フロートの不都合を解消する（１）

実はこの問題を解消するシンプルで簡単な方法がある

・フロートを含む親要素自体もフロートさせてしまう
・ overflowプロパティで「 visible 」以外の値を指定する

この二つである
こうするだけで、フロートさせた要素の親要素は、フロートしたボックス全体を含むように拡張される

親要素もフロートさせるということは、場合によってはさらにクリアする必要が出てくる
問題を一階層外側に追いやっただけの状態になる可能性がある
一般的にはフロートを使う方法はあまり利用されていない

例として、以下のサンプルのように「 overflow:　hidden; 」を指定すればこの問題は解消できる
ただし、「 overflow: hidden; 」を指定するので当然のことではあるが、親要素からはみ出た部分は表示されなくなる
絶対配置や相対配置などであえて何かをはみ出させているようなレイアウトの場合には、この方法は使えない

例

CSS

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

フロートの都合を解消する（２）

そこで、副作用がなくいつでも安全に利用できる他の方法が考え出された
フロートを含む親要素の最後の部分にCSSの contentプロパティ で空の文字列を挿入し、displayプロパティ を使ってそれをブロックレベル要素にした上で、そこに clearプロパティ を指定する手法

ただし、このテクニックが公開され話題になった2004年当時はブラウザのCSSへの対応がまだ不十分な時期で、単純にそれを行うだけでは期待どおりの表示にならないブラウザが多く存在していた
そのため、それらでうまく動作させるための裏技的手法（CSSハック）も組み合わせて使用されるようになり、多少難解なソースコードにはなったものの、最終的にはどのブラウザでもうまく機能するようになった

それら一連のソースコードがいわゆる「 clearfix 」と呼ばれるもので、長期にわたって使用されてきたために様々なバリエーションが存在している

clearfix の原型

clearfix は時代とともに変化してきたが、その原型は以下のようなものだった

CSS

.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
 
.clearfix { display: inline-block; }
 
/* hides from IE-mac ¥*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

使用方法は、当時はフロートを含む親要素に「class="clearfix"」を直接指定して適用させるか、clearfixのソースコード内の「.clearfix」の部分を親要素に既に指定されているクラス名に置き換えて使用していた

現在の clearfix のコード

clearfix の原型はとても長いものだったが、時代とともにサポートする必要のなくなった古いバージョンのブラウザに対する処理がどんどん削られていき、最終的にはほぼ次のようなシンプルな形となっている
（最終形においてもこれ以外のバリエーションが存在している）

CSS

.clearfix:after {
   content: "";
   display: block;
   clear: both;
}

clearfixでは現在、ブロックレベルのボックスを横に並べるにはフロートを使うしかなかった時代の過去のテクニックとなりつつある
フロートを使うよりも簡単でしかも高性能な　フレキシブルボックスレイアウト　や　グリッドレイアウト　の機能が利用できる