在一個(gè)BFC中，垂直方向上相鄰的塊級(jí)盒子產(chǎn)生外邊距塌陷，本文要說(shuō)一個(gè)特殊的外邊距塌陷情況，即當(dāng)垂直方向上，兩個(gè)塊級(jí)盒子之間有個(gè)浮動(dòng)元素相隔時(shí)，這個(gè)時(shí)候會(huì)產(chǎn)生什么樣的效果呢？

.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;*/浮動(dòng)部分被注釋掉了}.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設(shè)置一下：

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

效果如圖：

可知：浮動(dòng)元素不會(huì)影響后續(xù)塊級(jí)盒子與前面塊級(jí)盒子的外邊距塌陷。
但當(dāng)我們利用bottom清除浮動(dòng)時(shí)

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

效果圖：

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

給浮動(dòng)元素加上margin-top

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

2.調(diào)整浮動(dòng)元素的高度和margin新航道雅思培訓(xùn)

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

效果圖：

此時(shí)bottom元素的margin-top和top元素的margin-bottom重合了5px。此時(shí)clearance的值是-5px。
通過(guò)上面兩個(gè)驗(yàn)證，我們就可以知道有浮動(dòng)元素時(shí)，閉合浮動(dòng)元素的clearance是怎么計(jì)算的了。一個(gè)基本原則就是閉合浮動(dòng)的元素的border-top與浮動(dòng)元素的margin-bottom重合。

對(duì)浮動(dòng)元素的理解

另外，從上面的驗(yàn)證2中我們也可以總結(jié)出，浮動(dòng)元素與border，padding這樣的屏蔽外邊距塌陷的屬性不同，浮動(dòng)元素是脫離文檔流的，所以當(dāng)浮動(dòng)元素沒(méi)有大到足以分開(kāi)BFC中的相鄰盒子時(shí)，相鄰盒子的垂直margin還是會(huì)重疊的。

轉(zhuǎn)載于:https://blog.51cto.com/zhangtaoze/1914151

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。