偶然看到CSS的BFC。還心想，啥是BFC，怎麼一點印象都沒有。
查到MDN資料如下：
看完的感覺就是：還是不懂
後來看下了下面的示例：
示例1 ：
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div> .box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
看完才發現，這個示例說的其實就是高度坍塌（父元素如果不設定高度，高度是預設内部内容撐開的，如果内部所有元素都活動了，那麼父元素就認為内部沒有内容了，是以高度變成0）
那說了這麼多，高度坍塌如何解決呢？
（1）給父元素設定高度，問題是很多時候不确定父元素的高度；
（2）父元素也設定浮動，問題是會讓父元素的兄弟元素也收到影響；
（3）在最後一個子元素後面加一個空的塊級元素，設定clear:both（可以通過僞類選擇器 ::after{}實作）；
（4）就是MDN給出的解決方法：建立一個會包含這個浮動的BFC，通常的做法是設定父元素
overflow: auto
或者設定其他的非預設的
overflow: visible
的值。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
} 使用
overflow
來建立一個新的BFC，是因為
overflow
屬性告訴浏覽器你想要怎樣處理溢出的内容。當你使用這個屬性隻是為了建立BFC的時候，你可能會發現一些不想要的問題，比如滾動條或者一些剪切的陰影，需要注意。另外，對于後續的開發，可能不是很清楚當時為什麼使用
overflow
。是以你最好添加一些注釋來解釋為什麼這樣做。
（5）還是MDN給出的解決方法：一個新的
display
屬性的值，它可以建立無副作用的BFC。在父級塊中使用
display: flow-root
可以建立新的BFC。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
display: flow-root;
} 給
<div>
display: flow-root
屬性後，
<div>
中的所有内容都會參與BFC，浮動的内容不會從底部溢出。
示例2：外邊距坍塌
兩個相鄰
<div>
之間的 外邊距合并 問題：
在特殊情況下，為子元素設定上外邊距，會作用到父元素上：
如HTML代碼如下：
<body>
<div class="parent">
<div class="child"></div>
</div>
</body> CSS樣式如下：
*{
margin: 0;
padding: 0;
}
.parent{
width:300px;height:300px;
background-color: turquoise;
}
.child{
width:100px;height:100px;
background-color: yellow;
margin-top:30px;
} 結果：
可以看到，隻是為子元素設定了上外邊距，結果作用到了父元素上。
特殊情況包括：
（1）父元素沒有上邊框；
（2）子元素的内容區域的上沿與父元素的内容區域的上沿重合；
解決方法：
（1）給父元素加一個上外邊框。問題是，影響了父元素的實際占地高度；
（2）給父元素加上内邊距。問題也是影響了父元素的實際占地高度；
（3）在子元素前添加一個空的table标簽，也可以通過在父元素的僞類選擇器實作(.parent::before{content:'',display:"table"})；