イギリス BFC: ブロック書式設定コンテキスト BFCレイアウトルール
ブロック書式コンテキストを作成する方法 1. float の値は none ではありません。 2. 位置の値は静的でも相対的でもない。 3. displayの値は、inline-block、table-cell、flex、table-caption、inline-flexのいずれかです。 BFCの役割 1. マージンの重複を避けるために BFC を使用します。 2. 適応型2列レイアウト 3. フロートをクリアします。 クリアフロート フロートをクリアするのは主に、子要素のフロートにより親要素の内部高さが 0 になる問題を解決するためです。 フロートをクリアする方法 1. 追加ラベル付け方法 最後のフローティング ラベルの後に新しいラベルを追加し、clear: both; に設定します (非推奨) 利点: 分かりやすい、便利 デメリット: 意味のないタグの追加、意味の乏しさ <スタイル> .div1 { 背景: #00a2d4; } 。左 { フロート: 左; 幅: 200ピクセル; 高さ: 200px; 背景: #9889c1; } 。右 { フロート: 右; 幅: 200ピクセル; 高さ: 200px; 背景:オレンジ色; } 。クリア { クリア: 両方; } </スタイル> </head> <本文> <divクラス="div1"> <div class="left">左</div> <div class="right">右</div> <div class="clear"></div> </div> <div class="div2"></div> </本文> 2. 親にオーバーフロー属性を追加する BFC をトリガーしてフローティングをクリアします。 (非推奨) 利点: 簡潔なコード デメリット:コンテンツが増えると、自動行折り返しの失敗によりコンテンツが隠れてしまうことが発生しやすく、溢れた要素を表示できません。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> .div1 { 背景: #00a2d4; オーバーフロー: 非表示; } 。左 { フロート: 左; 幅: 200ピクセル; 高さ: 200px; 背景: #9889c1; } 。右 { フロート: 右; 幅: 200ピクセル; 高さ: 200px; 背景:オレンジ色; } </スタイル> </head> <本文> <divクラス="div1"> <div class="left">左</div> <div class="right">右</div> </div> <div class="div2"></div> </本文> </html> 3. after疑似要素を使用してフロートをクリアする(推奨) 利点: クローズドフローティングコンセプトに準拠し、正しい構造セマンティクスを備えています。 デメリット: ie6-7 は疑似要素をサポートしていません。hasLayout をトリガーするには、zoom: 1 を使用します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> .div1 { 背景: #00a2d4; } 。左 { フロート: 左; 幅: 200ピクセル; 高さ: 200px; 背景: #9889c1; } 。右 { フロート: 右; 幅: 200ピクセル; 高さ: 200px; 背景:オレンジ色; } .clearfix:後{ content: ""; /*コンテンツは空です*/ display: block; /*ブロックレベル要素に変換*/ height: 0; /*高さは0です*/ clear: both; /*float をクリア*/ visibility: hidden; /*ボックスを非表示にする*/ } .clearfix { *zoom: 1; /*IE6\7の処理方法*/ } </スタイル> </head> <本文> <div class="div1 clearfix"> <div class="left">左</div> <div class="right">右</div> </div> <div class="div2"></div> </本文> </html> 4. 前後の二重疑似要素を使用してフロートをクリアする 利点: フローティングをクリアできるだけでなく、高さの崩れの問題も解決できます (親ボックスにクラス名 clearfix を追加します) 欠点: hasLayout をトリガーするには zoom:1 を使用します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> .div1 { 背景: #00a2d4; } 。左 { フロート: 左; 幅: 200ピクセル; 高さ: 200px; 背景: #9889c1; } 。右 { フロート: 右; 幅: 200ピクセル; 高さ: 200px; 背景:オレンジ色; } .clearfix:after、.clearfix:before { コンテンツ: ""; 表示: テーブル; } .clearfix:後{ クリア: 両方; } .clearfix { *ズーム: 1; } </スタイル> </head> <本文> <div class="div1 clearfix"> <div class="left">左</div> <div class="right">右</div> </div> <div class="div2"></div> </本文> </html> 要約する CSS クリアフロートと BFC に関するこの記事はこれで終わりです。CSS フロート BFC に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Enterキーを押すとフォームが自動的に送信されます。予期せぬ発見
>>: Vue プロジェクトで mock を使用する方法をご存知ですか?
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...
<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...
さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...
目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...
この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...
まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...
目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...
MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...
1. Windows Server 2019 のインストールVmware に Windows Se...
1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...
この記事では、MySQL の ROUND 関数を使用した丸め操作の落とし穴を例を使って説明します。ご...
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...
01. 無限フォントのダウンロード02. バンダフォントのダウンロード03. ロールアップフォントの...
目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...