WEB CRAFT LAB

clearfix/float使用状況解析β版

β版について

チェックしたいページのURLを入力するだけ。ページで読み込まれているCSSから、clearfix・float・clearに関する記述を検出し、それぞれの役割とページ内での使用状況、現在のCSSで使える代替方法を確認できます。

この解析について：

解析対象：取得できたHTML／HTML内の<style>／取得できた外部CSS

解析できない可能性があるもの：JavaScriptで動的に生成されるHTML、JavaScriptで動的に読み込まれるCSS、認証が必要なページ、アクセスできないCSS、複雑なCSS構成、iframe内部のコンテンツ

また、CSSファイル内のルールは「このページのHTMLに実際に一致する要素があるか」もあわせて確認していますが、セレクタが複雑な場合は判定できないことがあります（その場合は「判定できません」と表示）。この解析結果は取得できたHTML/CSSをもとにしており、実際のレイアウト意図やすべてのCSSを完全に判断するものではありません。

FAQ

clearfixって何？
float指定した要素は、親要素の高さ計算から外れてしまいます。その結果、親のボックスが潰れてレイアウトが崩れることがあり、これを防ぐための古くからのテクニックが clearfix です。::after で疑似要素を追加し、content + display:block + clear:both を組み合わせて高さを強制的に確保します。
なぜ今どき clearfix はやめたほうがいいの？
clearfixはfloatレイアウトの副作用を後から打ち消すための回避策で、CSSに専用の仕組みがなかった時代のテクニックです。今は display:flex / display:grid や display:flow-root など、floatに頼らずに済む、あるいは高さ崩れそのものが起きない書き方が標準で用意されています。
display: flow-root って何？
親要素に display:flow-root を指定すると、内部に新しいブロック整形コンテキストが作られ、中の float 要素の高さも自動的に含めて計算されるようになります。疑似要素や clear を使わずに、1行で高さ崩れを解決できます。floatそのものは残したい場合の第一候補です。
floatを使い続けても大丈夫？
画像の回り込みなど、floatが今でも適切な用途はあります。ただし段組みやカードレイアウトのような「横に並べる」目的で使っている場合は、flex や grid に置き換えるほうが、clearfix自体が不要になりコードもシンプルになります。このツールは、floatを廃止できそうな箇所と、残す前提で flow-root に置き換えられそうな箇所を分けて提案します。
zoom: 1; もclearfixなの？
zoom:1 は、IE6/7に要素のhasLayoutという内部状態を持たせることで、floatによる高さ崩れを防いでいた古いブラウザ向けのハックです。::afterによるclearfixと組み合わせて、IE対応版として一緒に書かれていることがよくあります。現在対応が必要なブラウザにIE6/7が含まれないなら、zoom:1は削除して問題ないケースがほとんどです。このツールも zoom:1 を専用のカテゴリとして検出します。
overflow: hidden; もclearfixの一種？
親要素に overflow: hidden（または auto）を指定すると、疑似要素を使わずに新しいBFC（ブロック整形コンテキスト）が生まれ、floatした子要素の高さも含めて計算されるようになります。記述が少なく手軽な反面、子要素が親要素の領域からはみ出すデザイン（ドロップダウンメニューやネガティブマージンを使った装飾など）が途切れて見えなくなるという副作用があります。このツールは、clearfix系のクラス名と組み合わさっている場合にこのパターンを検出します。
中身のない<div>でfloatを解除しているのは？
floatさせた要素のあとに <div style="clear: both;"></div> のような空のタグを置いて回り込みを解除する、昔ながらの手法です。見た目のためだけの要素をHTML構造に直接追加することになり、文書構造とスタイルを分離する原則に反するため、現在ではアンチパターンとされています。このツールは、インラインstyleで clear が指定された空要素をレガシーな手法として区別して表示します。
見つかったコードは、このURLで実際に使われているの？
HTML側で見つかったもの（クラス名やインラインstyle）は、指定したURLのHTMLを直接見ているため実際の使用が確認できています。一方、外部CSSや<style>内のルールは、CSSファイルにその記述が存在することは分かっても、対応する要素がこのページに実際にあるかは別問題です（CSSはサイト内で使い回されることが多いため）。このツールは、シンプルなセレクタ（タグ・クラス・ID・子孫/子コンビネータの組み合わせ）についてはこのページのHTMLと照合し、一致する要素が見つかったかどうかを表示します。属性セレクタや:not()のような複雑なセレクタは判定できないため、その場合は「判定できません」と表示されます。なお、このツールはJavaScriptを実行せず取得した生HTMLのみを見ているため、ナビ・ヘッダー・フッターなどがJavaScriptで動的に読み込まれているページでは、実際には使われていても「一致要素なし」と表示されることがあります。
float/clearfixと一緒に、高さを揃えるJavaScriptも使っていませんか？
floatでカードや段組みを横並びにすると、コンテンツ量の違いで高さがバラバラになりがちです。そのため、outerHeight()で最大値を求めて全要素に適用する、といった「高さ揃え専用のJavaScript」が一緒に組まれていることがあります。このツールはJSの中身までは解析していないため自動検出はできませんが、display:flexやdisplay:gridに置き換えると、こうした高さ揃えのスクリプト自体が不要になるケースが多くあります。float/clearfixを見直す際は、あわせてJS側に高さ調整用のコードが残っていないかも確認することをおすすめします。