BFCとマージン崩壊の深い理解
bfc
のすべてのものは、W3C仕様によるBFCの説明を見てみましょうこの概念を学ぶには、常に最初に公式の定義を探すことをお勧めします。原則として、公式の定義が最も権威があり、正確であり、さらに詳細であるからといって、それを見たからといって恐れる必要はありません。英語で。
w3c 仕様における BFC 定義:
BFC では、各ボックスの左外端 (margin-left) がコンテナの左端 (border-left) に接します (右から左への形式の場合、右端に接します)。
BFC の一般的な理解:
まず第一に、BFC は独立したレイアウト環境です (実際には目に見えず、無形です)。外の世界に影響を受けます。 BFC への変換の理解は次のとおりです。BFC 内の要素のレイアウトは外部の影響を受けません (この機能は、非浮動兄弟要素およびそのサブ要素に対する浮動要素の影響を排除するためによく使用されます)。 a BFC では、ブロック ボックスとライン ボックス (ライン ボックスは、行内のすべてのインライン要素で構成されます) が、親要素の境界に沿って垂直に配置されます。
BFC の使用
w3c 仕様では、上記の定義を除いて、BFC の関連知識ポイントは比較的分散していますが、基本的には float、絶対位置決め、およびマージン コラスペに集中しています。この問題を解決するために 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 つのマージンに結合できます。マージンを結合するこの方法は折りたたみと呼ばれ、結果として生じるマージンは折りたたまれたマージンと呼ばれます。
（下面我们对不产生折叠的情况逐一分析。）
原因：浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个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 に戻りません。
inline-block は w3c 仕様に準拠していません。仕様では、ブロック レベル ボックスの表示属性は、「block」、「list-item」、「table」の 3 つのいずれかでなければならないとも規定されているため、要素はブロック レベルのボックス条件である必要があると記載されています。 。
転載場所: http://www.w3cplus.com/css/ Understanding-bfc-and-margin-collapse.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
