外邊距塌陷之clearance

在乙個bfc中，垂直方向上相鄰的塊級盒子產生外邊距塌陷，本文要說乙個特殊的外邊距塌陷情況，即當垂直方向上，兩個塊級盒子之間有個浮動元素相隔時，這個時候會產生什麼樣的效果呢？

.outer .box .top .float

.bottom

class="outer">
class="top box">top
class="float">
class="bottom box">bottom

效果圖：

然後我把中間的div設定一下：

.float

class="float">float

效果如圖：

可知：浮動元素不會影響後續塊級盒子與前面塊級盒子的外邊距塌陷。

但當我們利用bottom清除浮動時

.bottom

效果圖：

可知：使用清除浮動屬性的元素，它的外邊距塌陷規則變成如下規則：閉合浮動的盒子的border-top始終和浮動元素的margin-bottom底部重合。而在閉合浮動的盒子的margin-top上方，直到top盒子的margin-bottom底部這段距離，就是我們所說的clearance。

驗證：給浮動元素加上margin-top

.float

2.調整浮動元素的高度和margin

.float

.bottom

效果圖：

此時bottom元素的margin-top和top元素的margin-bottom重合了5px。此時clearance的值是-5px。

通過上面兩個驗證，我們就可以知道有浮動元素時，閉合浮動元素的clearance是怎麼計算的了。乙個基本原則就是閉合浮動的元素的border-top與浮動元素的margin-bottom重合。

另外，從上面的驗證2中我們也可以總結出，浮動元素與border，padding這樣的遮蔽外邊距塌陷的屬性不同，浮動元素是脫離文件流的，所以當浮動元素沒有大到足以分開bfc中的相鄰盒子時，相鄰盒子的垂直margin還是會重疊的。