float をクリアするための最も包括的な CSS Clearfix メソッド
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の深度分析
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
