ホームページ > 記事 > ウェブフロントエンド > BFC(ブロックフォーマットコンテキスト)初探_html/css_WEB-ITnose
BFC(ブロックフォーマットコンテキスト)初探_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:58:09921ブラウズ
フロントエンド エンジニアの面接では、多かれ少なかれ 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重叠规则：* 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值* 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值* 两个外边距一正一负时，折叠结果是两者的相加的和p の外側でコンテナをラップし、 BFC を生成するコンテナ。この場合、2 つの P は同じ BFC に属さず、マージンの重複は発生しません
<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(外边距叠加)