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の深度分析
毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am 11:20 AM今週のラウンドアップ：Firefoxは錠前屋のような力を獲得し、Samsung＆＃039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています
毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am 11:15 AM今週のラウンドアップ：Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します
CSSカスタムプロパティを使用したスコープのパワー（および楽しい）Apr 14, 2025 am 11:11 AMおそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります：それらは本当にカスタムプロパティと呼ばれます、あなたは設定します
私たちはプログラマーですApr 14, 2025 am 11:04 AM建物のウェブサイトはプログラミングです。 HTMLとCSSの作成はプログラミングです。私はプログラマーです。ここでCSS-Tricksを読んでいる場合、あなたは＆＃039;
サイトから未使用のCSSをどのように削除しますか？Apr 14, 2025 am 10:59 AMここに＆＃039;私が前もって知るのが好きなこと：これは難しい問題です。あなたがここに上陸した場合、あなたはあなたが伝えることができるツールを指し示すことを望んでいるので、あなたが＆＃039;
ピクチャーインピクチャーWeb APIの紹介Apr 14, 2025 am 10:57 AMPicture-in-Pictureは、2016年にMacos SierraをリリースしたSafariブラウザでWebに初めて登場しました。ユーザーがポップできるようになりました。
ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法Apr 14, 2025 am 10:56 AMGatsbyは、画像の処理と処理の素晴らしい仕事をしています。たとえば、手動で画像の最適化で時間を節約するのに役立ちます
ああ、パディングの割合は親要素の幅に基づいていますApr 14, 2025 am 10:55 AM私は今日、私の頭の中で完全に間違っていたことをパーセンテージベース（％）のパディングについて学びました！パディングの割合はに基づいているといつも思っていました
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
Dreamweaver Mac版
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
