BFC とマージンの結合 (マージンの崩壊) についての深い理解_html/css

BFC とマージンの結合 (マージンの崩壊) についての深い理解_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:27

オリジナル

1395 人が閲覧しました

1. BFC とは何ですか?

1. BFC の概念

BFC の正式名称は Block Formatting Context で、直訳すると「ブロックレベルの書式設定コンテキスト」、「ブロックレベルの書式設定スコープ」とも訳されます。これは、要素がそのコンテンツをどのように配置し、他の要素と関連し、相互作用するかを決定する W3C CSS 2.1 仕様の概念です。平たく言えば、div 内では、float と margin を使用して要素をレイアウトします。

2.BFCレイアウトルール

内部のBoxは縦方向に順番に配置されます。
ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
各要素のマージンボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
BFC エリアはフロートボックスと重なりません。
BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。
BFCの高さを計算するとき、浮動要素も計算に参加します

ルート要素

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