イギリス 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 を使用する方法をご存知ですか?
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...
目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...
最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...
一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...
今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...
この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....
mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...
Docker バージョン 1.13.1問題プロセス特定の環境のMySQLコンテナを停止、強制終了、ま...
1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...
シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...