ホームページ > 記事 > ウェブフロントエンド > float をクリアするための最も包括的な CSS Clearfix メソッド
float をクリアするための最も包括的な CSS Clearfix メソッド
- PHPzオリジナル
- 2017-03-17 16:25:554443ブラウズ
Clearfix は、Float をクリアするために CSS でよく使用されます。著者は、clearfix を使用するいくつかの異なる方法を比較のためにリストしています。必要な場合は、Float をクリアするための CSS Clearfix メソッドを参照してください。(なぜ CSS は float をクリアする必要があるのですか?はフロートをクリアする原理です)
まず、.clearfix とは何ですか
Google や Baidu で「CSS フロートをクリアする」を検索するだけで、多くの Web サイトで「ボックスがいつ削除されるか」について説明していることがわかります。内部フロートをクリアします。「.clearfix」を使用できます。
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}<p class="clearfix">
<p class="floated"></p>
</p>上記のコードは .clearfix の定義と適用です。
1 の原理について簡単に説明します。IE6 および 7 では、zoom: 1 が hasLayout をトリガーし、それによって要素の内部フロートが閉じられます。
2. 標準ブラウザでは、.clearfix:after 疑似クラスは、.clearfix に適用された要素の後に、clear: Both ブロックレベル要素を挿入し、それによって float をクリアします。
<p> <p class="floated"></p> </p> <p style="clear: both"></p>
二番目に、.clearfix の欠点
上記のコードでわかるように、IE6 と 7 を除いて、.clearfix は標準ブラウザーで Clear: Both 要素を挿入します。これにより、不要なフロートの削除が行われる可能性があります。例で説明すると:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
html, body { padding: 0; margin: 0; }
ul { margin: 0; padding: 0; }
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.left-col {
background: red; float: left;
width: 100px;
height: 300px;
}
.right-col {
margin-left: 100px;
}
.menu {
border: 1px solid #000;
}
.menu li { float: left;
display: block;
padding: 0 1em;
margin: 0 1em 0 0;
background: #ccc;
}
.placeholder {
background: yellow;
height: 400px;
} </style>
</head>
<body>
<p class="left-col">
</p>
<p class="right-col">
<ul class="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
<p class="placeholder"></p>
</p>
</body>
</html>上記のコードは 2 列のレイアウト ページを構成します。 .menu メニューには境界線がありますが、.menu の li 要素が左にフローティングしているため、.menu には高さがなく、.clearfix を使用して .menu 内のフローティング コンテンツをクリアできることに注意してください。コードは次のとおりです:
<ul class="menu clearfix"> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul>
しかし、.clearfix を適用すると、標準ブラウザではページが非常に汚くなります。これは、.clearfix:after が .left-col の float もクリアするためです。
3. .clearfix を再構築します
上記のエラーが発生した後、.clearfix:after 以外に要素内の float をクリアする方法があるかどうかを分析します。答えは「はい」です。「現地語のブロック フォーマット コンテキスト」の記事では、ブロック フォーマット コンテキストを構成する要素が内部要素のフローティングをクリアできると述べられています。次に、.clearfix をブロック フォーマット コンテキストとして作成します。ブロック フォーマット コンテキストを構成するにはいくつかの方法があります:
float の値は none ではありません。
オーバーフローの値は表示されません。
displayの値はtable-cell、table-caption、inline-blockのいずれかです。
位置の値は相対的でも静的でもありません。
明らかに、float とposition は私たちのニーズには適していません。その場合、オーバーフローまたはディスプレイから 1 つだけを選択できます。 .clearfix および .menu で適用されるメニューはマルチレベルである可能性が非常に高いため、overflow: hidden または overflow: auto はニーズを満たしていません (ドロップダウン メニューが非表示になるか、スクロール バーが表示されます)。表示のみを使用します。 アクションを実行します。
.clearfixのdisplay値はtable-cell、table-caption、inline-blockのいずれかに設定できますが、display:inline-blockは余分な空白が生じるのでこれも除外します。残っているのは table-cell と table-caption だけです。display: table は匿名ボックスの 1 つを生成するため、display: table を使用して .clearfix をブロック フォーマット コンテキストにできます。 (表示値はテーブルセル) はブロックフォーマットコンテキストを形成します。このようにして、新しい .clearfix は内部要素のフロートを閉じます。以下はリファクタリング後の .clearfix です。
.clearfix {
zoom: 1;
display: table;
width: 100%;
}4、概要
IE6 および 7 では、hasLayout をトリガーする要素が内部フロートをクリアできる限り。標準ブラウザで要素の内部フロートをクリアする方法は数多くありますが、.clearfix:after を除く他のメソッドは、目的を達成するために新しいブロック フォーマット コンテキストを生成するだけです。どのメソッドをどのような条件で使用できるのであれば、これで十分だと思います...
フロートをクリアするCSSのclearfixメソッドに関するその他の関連記事については、PHP中国語のWebサイトに注目してください
関連記事:
In -フロートをクリアするためのclearfixの深度分析