BFC とマージンについての深い理解 Collapse_html/css_WEB-ITnose

BFCとマージン崩壊の深い理解

bfc

のすべてのものは、W3C仕様によるBFCの説明を見てみましょうこの概念を学ぶには、常に最初に公式の定義を探すことをお勧めします。原則として、公式の定義が最も権威があり、正確であり、さらに詳細であるからといって、それを見たからといって恐れる必要はありません。英語で。

BFC (ブロック フォーマット コンテキスト) とは

w3c 仕様における BFC 定義:

浮動要素と絶対配置要素、非ブロック レベル ボックスのブロック レベル コンテナ (インライン ブロック、テーブル セル、 table-captions )、および「visiable」以外のオーバーフロー値を持つブロック レベル ボックスは、その内容に対して新しい BFC (ブロック レベル フォーマット コンテキスト) を作成します。

BFC では、ボックスが上から順番に垂直に配置され、2 つのボックス間の垂直方向の間隔はマージンの値によって決まります。 BFC では、2 つの隣接するブロック レベル ボックスの垂直方向のマージンが崩れます。

BFC では、各ボックスの左外端 (margin-left) がコンテナの左端 (border-left) に接します (右から左への形式の場合、右端に接します)。

BFC の一般的な理解:

まず第一に、BFC は独立したレイアウト環境です (実際には目に見えず、無形です)。外の世界に影響を受けます。 BFC への変換の理解は次のとおりです。BFC 内の要素のレイアウトは外部の影響を受けません (この機能は、非浮動兄弟要素およびそのサブ要素に対する浮動要素の影響を排除するためによく使用されます)。 a BFC では、ブロック ボックスとライン ボックス (ライン ボックスは、行内のすべてのインライン要素で構成されます) が、親要素の境界に沿って垂直に配置されます。

BFC の使用

w3c 仕様では、上記の定義を除いて、BFC の関連知識ポイントは比較的分散していますが、基本的には float、絶対位置決め、およびマージン コラスペに集中しています。この問題を解決するために BFC を適用する方法を見てみましょう。

多くの Web サイトでは、左側に写真 + 右側に情報という 2 列構造がよく見られます。これを実現するために BFC を使用する方法を見てみましょう。

最初に次の構造を与えます:

//CSS.box {width:210px;border: 1px solid #000;float: left;}.img {width: 100px;height: 100px;background: #696;float: left;}.info {background: #ccc;color: #fff;}//HTML<div class="box"> <div class="img">image</div> <p class="info">信息信息信息信息信息信息信息信息信息信息信息信</p></div>

一般的に、それは私たちが見たいもののように見えます:

しかし、テキスト情報が増加すると、非常に悪くなります:

明らかに、これはテキストがinfo クラス内の要素は浮動要素の影響を受けますが、これは私たちが期待しているものではありません。現時点では、P 要素の内容に対して BFC を確立して、その内容が外部の浮動要素に与える影響を排除できます。上記の内容によると、info 要素に overflow:hidden; を追加するだけで、そのコンテンツ用の新しい BFC が作成されます。もちろん、他の方法で作成することもできます。効果は次のとおりです:

マージンと BFC を結合する

CSS では、2 つの隣接するボックス (兄弟または先祖である可能性があります) のマージンを 1 つのマージンに結合できます。マージンを結合するこの方法は折りたたみと呼ばれ、結果として生じるマージンは折りたたまれたマージンと呼ばれます。

折り畳んだ結果:

2 つの隣接するマージンが両方とも正の数の場合、折り畳んだ結果はそれらの間の大きい方の値になります。

2 つの隣接するマージンが両方とも負の場合、折り畳まれた結果は 2 つの絶対値のうち大きい方になります。
2 つの外側のマージンが 1 つが正、もう 1 つが負の場合、折り畳まれた結果は 2 つの合計になります。
3. 折り畳みに必要な条件: マージンが隣接している必要があります!

w3c 仕様によれば、隣接する 2 つのマージンは次の条件を満たしている必要があります:

必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。

没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开

都属于垂直方向上相邻的外边距，可以是下面任意一种情况

元素的margin-top与其第一个常规文档流的子元素的margin-top

元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠

浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

绝对定位元素不与任何元素的外边距产生折叠

inline-block元素不与任何元素的外边距产生折叠

一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。

一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。

一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。

一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

（下面我们对不产生折叠的情况逐一分析。）

浮动和绝对定位不与任何元素产生 margin 折叠

原因：浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。

DEMO：

//CSSbody {padding:0;margin: 0; text-align: center;}.wrapper {margin:30px;width: 450px;border:1px solid red;}.small-box {width: 50px;height: 50px;margin: 10px;background: #9cc;}.middle-box {width: 100px;height: 100px;margin: 20px;background: #99c;}.big-box {width: 120px;height: 120px;margin: 20px;background: #33e;}.floatL {float: left;}.floatR {float: right;}.clear {clear: both;}.posA {position: absolute;}.overHid{overflow: hidden;}.red {background: #f00;}.green {background: #0f0;}.blue {background: #00f;}//HTML<div class="wrapper overHid"> <div class="big-box blue">non-float</div> <div class="middle-box green floatL"> <div class="small-box red"></div> float left </div></div>

但是浮动元素脱离了当前的BFC并不影响它后面的兄弟元素，后面的兄弟元素与浮动元素前面的元素依然在同一个BFC当中，所以，它们之间的margin还是会折叠的。下面我们对上面的demo做一下修改：

<div class="wrapper overHid"> <div class="big-box">non-float</div> <div class="middle-box green floatL">float left</div> <div class="middle-box red">non-clear</div></div>

从上面这个修改后的demo中可以看出，红色的块盒在没有清楚浮动的情况下，它的margin-top和蓝色块盒的margin-bottom产生了折叠，这证明了我上面的结论。

下面我们来谈谈 'clearance' 这个神奇的东西，当浮动元素之后的元素设置clear以闭合相关方向的浮动时，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance，如下图），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。关于这个间距的计算稍微有点复杂，但实际工作中你并不需要去计算它，我们先来看看例子吧：

<div class="wrapper overHid"> <div class="big-box" style="box-shadow:0 20px 0 rgba(0,0,255,0.2);">non-float</div> <div class="middle-box green floatL" style="opacity:0.6">float left</div> <div class="middle-box red clear" style="margin-top:40px;box-shadow:0 -40px 0 rgba(255,0,0,0.2);">clear</div></div>

上面的图中我们可以看到，我们为红色块盒设置的40px的margin-top（这里我们通过相同高度的阴影来将其可视化）好像并没有对紫色块盒起作用，而且无论我们怎么修改这个margin-top值都不会影响红色块盒的位置，而只由绿色块盒的margin-bottom所决定。

也就是说，我们只需要知道，闭合浮动的元素的border-top会紧贴着相应的浮动元素的margin-bottom。

w3c の公式仕様によれば、ブロック ボックスを垂直方向に移動させるには、マージン上部とマージン上部の閉じたフローティング ブロック ボックスによって生成されるクリアランス値の合計が十分であることが判明しました。 margin-bottom は、フローティング要素のブロック ボックスの margin-bottom に、閉じたフローティング ブロック ボックスの border-top を正確に隣接させます。

上記の例の相関値を使用すると、次のような式を得ることができます: r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom

PS! float を閉じても、float 要素は元の BFC に戻りません。

分析 2: inline-block 要素とその兄弟要素、子要素、親要素のマージンは折り畳まれません (親要素と子要素を含む)

inline-block は w3c 仕様に準拠していません。仕様では、ブロック レベル ボックスの表示属性は、「block」、「list-item」、「table」の 3 つのいずれかでなければならないとも規定されているため、要素はブロック レベルのボックス条件である必要があると記載されています。 。

転載場所: http://www.w3cplus.com/css/ Understanding-bfc-and-margin-collapse.html