ホームページ > 記事 > ウェブフロントエンド > BFC とマージンの結合 (マージンの崩壊) についての深い理解_html/css_WEB-ITnose
BFC とマージンの結合 (マージンの崩壊) についての深い理解_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:271360ブラウズ
1. BFC とは何ですか?
1. BFC の概念
BFC の正式名称は Block Formatting Context で、直訳すると「ブロックレベルの書式設定コンテキスト」、「ブロックレベルの書式設定スコープ」とも訳されます。これは、要素がそのコンテンツをどのように配置し、他の要素と関連し、相互作用するかを決定する W3C CSS 2.1 仕様の概念です。平たく言えば、div 内では、float と margin を使用して要素をレイアウトします。
2.BFCレイアウトルール
- 内部のBoxは縦方向に順番に配置されます。
- ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
- 各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
- BFC エリアはフロート ボックスと重なりません。
- BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。
- BFCの高さを計算するとき、浮動要素も計算に参加します
ルート要素
- float属性はなしではありません
- 位置は絶対または固定です
- 表示はインラインです-block、table -cell、table-caption、flex、inline-flex
- オーバーフローは表示されません
- 3. BFC
1の機能と原理
BFC レイアウト ルール項目 3 に従います:
各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
したがって、浮動要素slideはありますが、mainの左側は包含ブロックの左側と接触したままになります。
BFC レイアウトの 4 番目のルールによると:
BFC の領域はフロート ボックスと重なりません。
mainをトリガーしてBFCを生成することで、適応的な2列レイアウトを実現できます。
main がトリガーされて BFC が生成されると、この新しい BFC はフローティングの Side と重複しません。したがって、含まれるブロックの幅と脇の幅に応じて自動的に狭くなります。効果は次のとおりです:
2. 内部フロートのクリア
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body>
ページ効果:
BFC レイアウト ルールの第 6 条による:
B の高さを計算するときFC、フローティング要素も計算に参加します
内部浮動小数点をクリアするために、par をトリガーして BFC を生成できます。その後、par が高さを計算するときに、par 内の浮動要素の子も計算に参加します。
コード:
.par { overflow: hidden; }
効果は次のとおりです:
3. 垂直マージンの重なりを防止します
ページ効果:
二人の距離pは100pxで、マージンオーバーラップが送信されます。 BFC の 2 番目のレイアウト ルールに従って:
Box の垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
p の外側でコンテナをラップし、そのコンテナをトリガーして BFC を生成することができます。この場合、2 つの P は同じ BFC に属さず、マージンの重複は発生しません。
コード:
<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>
効果は次のとおりです:
4. 概要
BFC は、ページ上で分離された独立したコンテナです。コンテナ内のサブ要素は、外部の要素に影響を与えません。およびその逆。
BFC 内の要素と BFC の外側の要素は決して相互に影響を与えないため、BFC の外側にフロートがある場合、BFC 内の Box のレイアウトには影響を与えないはずです。フロートを重ねます。同様に、BFC 内にフロートがある場合、外部要素のレイアウトに影響を与えないように、BFC は高さを計算するときにフロートの高さを含めます。マージンの重複を避ける場合も同様です。
抜粋:
参考記事:
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-question-flow-bfc-column-two-auto-layout/
http://www.w3cplus.com/css/ Understanding-bfc-and-margin-collapse.html
http://cssor.com/css-bfc-block-formatting-context.html
http: //www.haorooms.com/post/css_BFC_bgdiv
http://caibaojian.com/bfc.html