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>
當文字增多時，會打破左右布局的情況：
當然這是因為文字受到了浮動元素的影響，如果我們仍需要保持左右布局的話，可以為
p
元素建立一個 BFC，使其消除對外界浮動元素的影響。建立 BFC 的方法在定義時已經說明，是以在此我們可以為info類添加
overflow:hidden
樣式：
另外 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