BFC
BFC 的定義
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks，table-cells 和 table-captions），以及 overflow 值不爲“ visible ”的塊級盒子，都會創建 BFC（塊格式化上下文）。
BFC 特點
- 元素的佈局不受外界影響，往往利用其來消除浮動。
- 在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
BFC 的應用
在網站中，經常會使用一種，左邊圖片+右邊信息的兩欄結構，下面利用 BFC 來實現。
首先代碼如下：
<style>
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
p{margin: 0;}
</style>
<div class="box">
<div class="img">image</div>
<p class="info">信息信息信息信息信息信息信息信息信息信息信息信</p>
</div>
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MM2zeVaz-1588121596199)(img/image-20200428201320171.png)]
當文字增多時，會打破左右佈局的情況：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xfPAp5Nu-1588121596201)(img/image-20200428201458664.png)]
當然這是因爲文字受到了浮動元素的影響，如果我們仍需要保持左右佈局的話，可以爲p元素創建一個 BFC，使其消除對外界浮動元素的影響。創建 BFC 的方法在定義時已經說明，所以在此我們可以爲info類添加overflow:hidden 樣式：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aOpw1Zb7-1588121596203)(img/image-20200428201846483.png)]
另外 BFC 主要的應用有兩個：解決 margin 摺疊問題，清除浮動。
margin 摺疊
合併外邊距與 BFC（或者 margin 疊加）
在CSS當中，相鄰的兩個盒子（可能是兄弟關係，也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式稱爲摺疊，並且因而所結成的外邊距稱爲摺疊外邊距。
摺疊的結果：
- 兩個相鄰的外邊距都是正數時，摺疊結果取決於它們兩者之間較大的值。
- 兩個相鄰外邊距都是負數時，摺疊結果取決於他倆者絕對值較大的值。
- 兩個相鄰外邊距一正一負時，摺疊結果是兩者之和。
產生摺疊的必備條件：margin 必須是鄰接的。
必須滿足以下條件才能證明兩個margin是鄰接的：
- 必須是處於常規文檔流（非float和絕對定位）的塊級盒子，並且處於同一個 BFC 中。
- 沒有線盒，沒有空隙（clearance），沒有padding和border將他們分隔開
- 都屬於垂直方向上相鄰的外邊距，比如下面的任意一種情況：
- 元素的margin-top與其第一個常規文檔流的子元素的margin-top
- 元素的margin-top與其下一個常規文檔流的兄弟元素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。
- 一個不包含border-top、border-bottom、padding-top、padding-bottom的常規文檔流元素，並且其 ‘height’ 爲 0 或 ‘auto’， ‘min-height’ 爲 ‘0’，其裏面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會摺疊。
以上內容摘選自文獻1
清除浮動
- 觸發浮動元素父元素的BFC，使其能夠包含浮動元素
- 給父元素添加
overflow:hidden樣式 - 給父元素設置爲浮動元素或者絕對定位
- 給父元素添加
display:inline-block
- 給父元素添加
- 利用
clear屬性來閉合元素- 在浮動元素後添加一個空元素，空元素樣式爲
clear:both - 給受到浮動影響的元素添加
clear:both樣式 - 給浮動元素父元素添加僞元素
:after{content: '';display: block;clear: both;}
- 在浮動元素後添加一個空元素，空元素樣式爲
文獻
- https://justcode.ikeepstudying.com/2016/07/css-%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3bfc%E5%92%8Cmargin-collapse-margin%E5%8F%A0%E5%8A%A0%E6%88%96%E8%80%85%E5%90%88%E5%B9%B6%E5%A4%96%E8%BE%B9%E8%B7%9D/
- https://juejin.im/post/59e7190bf265da4307025d91#heading-2
- https://segmentfault.com/a/1190000004865198