BFC(ブロックフォーマットコンテキスト)初探_html/css_WEB-ITnose
フロントエンド エンジニアの面接では、多かれ少なかれ BFC (ブロック フォーマット コンテキスト) 関連の知識について尋ねられます。私も日々の開発でBFCの問題に遭遇したことがありますが、この分野の知識をきちんと整理できていないので、他人に聞かれても、そんな概念を知っているとはあえて言えませんo(╯□╰)o。この 2 日間、私はこの知識のギャップを埋めるためにいくつかの記事を注意深く読みました。
BFC とは何ですか?
BFC とは何かを理解する前に、ボックスとフォーマットコンテキストの概念を理解する必要があります
ボックス: CSS レイアウトの基本単位
ボックスはオブジェクトであり、基本単位です直感的に言えば、ページは多数のボックスで構成されます。要素の種類と表示属性によってボックスの種類が決まります。さまざまなタイプのボックスがさまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。ボックス分類:
ブロックレベルボックス: 表示属性がブロック、リスト項目、およびテーブルである要素は、ブロックレベルのボックスを生成します。また、ブロックの書式設定コンテキストに参加します。
inline-level box: 表示属性が inline、inline-block、および inline-table である要素は、インライン レベルのボックスを生成します。また、インライン書式設定コンテキストに参加します。
run-in ボックス: 表示属性が run-in である要素は、コンテキストに基づいてオブジェクトがインライン オブジェクトであるかブロックレベル オブジェクトであるかを決定します。 。 CSS3のプロパティです！
コンテキストのフォーマット
コンテキストのフォーマットは、W3C CSS2.1 仕様の概念です。これはページ上のレンダリング領域であり、そのサブ要素がどのように配置されるか、および他の要素との関係や相互作用を決定する一連のレンダリング ルールがあります。最も一般的な書式設定コンテキストは、ブロック 書式設定コンテキスト (BFC) とインライン 書式設定コンテキスト (IFC) です。
BFC 定義
BFC (Block Formatting Context) ブロックレベルの書式設定コンテキスト。独立したレンダリング領域であり、ブロックレベルのボックスのみが参加し、内部のブロックレベルのボックスを指定します。配置されているのはこのエリアの外とは何の関係もありません。
BFC レイアウト規則
内部のボックスは垂直方向に次々と配置されます
ボックスの垂直方向の距離はmargin によって決定 同じ BFC に属する 2 つの隣接するボックスのマージンが重なることが決定されます
各要素のマージン ボックスの左側は、要素の左側と接しています包含ブロック境界ボックス (左から右への書式設定の場合、それ以外の場合はその逆)
BFC 領域はフロート ボックスと重なりません
BFC はページ上の分離です。独立したコンテナーであり、コンテナー内の子要素は外部の要素に影響を与えません。その逆
BFC の高さを計算するとき、浮動要素も計算に参加します
どの要素が BFC を生成するか
ルート要素
float 属性は none ではありません
位置は絶対または固定です
表示inline -block、table-cell、table-caption、flex、inline-flex です
オーバーフローは表示されません
BFC の機能と原理
1. 適応型 2 列レイアウト
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background-color: #f66; } .main { height: 200px; background-color: #fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body>表示効果:
BFC レイアウト規則第 3 条に準拠:
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
したがって、浮動要素は別にありますが、main の左側は依然として包含ブロックの左側と接触しています
4 番目の BFC レイアウト ルールに従って:
BFC的区域不会与float box重叠
Generate BFC によって main をトリガーして、適応型 2 列レイアウトを実装できます。
.main { height: 200px; background-color: #fcc; overflow: hidden; }main がトリガーされて BFC を生成すると、この新しい BFC はフローティング サイドと重なりません。したがって、含まれるブロックの幅と脇の幅に応じて自動的に狭くなります。効果は次のとおりです:
2. 内部フロートのクリア
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; }</style><body> <div class="par"> <div class="child"></div> <div class="child"></div> </div></body>表示効果:
BFC によるレイアウト ルール 6 番目のバー:
计算BFC的高度时，浮动元素也参与计算
内部フロートをクリアするために、par をトリガーして BFC を生成できます。その後、par が高さを計算するときに、par 内の浮動要素の子も計算に参加します。 🎜>
.par { border: 5px solid #fcc; width: 300px; overflow: hidden; }3. 垂直マージンの重なりを防止します
<style> p { width: 200px; line-height: 100px; margin: 100px; font-weight: bold; color: #f55; background-color: #fcc; text-align: center; }</style><body> <p>heihei</p> <p>gagaga</p></body>2 つの p の間の距離は 100px で、マージンのオーバーラップが発生します
2 番目の BFC レイアウト ルールに従います:
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠margin重叠规则：* 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值* 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值* 两个外边距一正一负时，折叠结果是两者的相加的和
<style> .wrap { overflow: hidden; } p { width: 200px; line-height: 100px; margin: 100px; font-weight: bold; color: #f55; background-color: #fcc; text-align: center; }</style><body> <p>heihei</p> <div class="wrap"><p>gagaga</p></div></body>
总结
其实以上的几个例子都体现了BFC布局规则第五条：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此！
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
参考
前端精选文摘：BFC 神奇背后的原理
我对BFC的理解
谈外margin collapsing(外边距叠加)
ホット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）
ホットトピック
7514
15
1378
52
79
11
19
64
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
