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

.outer{????????overflow:?auto;????????width:?300px;????????height:?500px;????????border:?2px?solid?#6666FF;}.box{????????width:?100px;????????height:?100px;????????font-family:?"simhei";??}.top{????????margin-bottom:?20px;????????background:?#CC6600;}.float{/*float:?left;*/浮動部分被注釋掉了}.bottom{????????margin-top:?10px;???background:?#33FF66;}<div?class="outer"><div?class="top?box">top</div><div?class="float"></div><div?class="bottom?box">bottom</div></div>

效果圖：

然后我把中間的div設置一下：

.float{????????float:?left;????????margin-bottom:?10px;????????background:?#9900CC;????????width:?50px;????????height:?50px;}<div?class="float">float</div>

效果如圖：

可知：浮動元素不會影響后續塊級盒子與前面塊級盒子的外邊距塌陷。
但當我們利用bottom清除浮動時

.bottom{????????margin-top:?10px;???background:?#33FF66;????????clear:?both;}

效果圖：

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

給浮動元素加上margin-top

.float{????float:?left;????margin-top:?10px;????margin-bottom:?10px;????background:?#9900CC;????width:?50px;????height:?50px; }

2.調整浮動元素的高度和margin新航道雅思培訓

.float{????????float:?left;????????margin-top:?5px;????????margin-bottom:?5px;????????background:?#9900CC;????????width:?50px;????????height:?5px;}????.bottom{????????margin-top:?20px;???background:?#33FF66;????????clear:?both;}

效果圖：

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

對浮動元素的理解

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

轉載于:https://blog.51cto.com/zhangtaoze/1914151

總結

以上是生活随笔為你收集整理的外边距塌陷之clearance的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。