一，盒子塌陷是什么？

本應該在父盒子內部的元素跑到了外部。

二，為什么會出現(xiàn)盒子塌陷？

當父元素沒設置足夠大小的時候，而子元素設置了浮動的屬性，子元素就會跳出父元素的邊界（脫離文檔流），尤其是當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零， 我們稱這是CSS高度塌陷。

下圖下方兩個子元素的盒子分別設置了左浮動和右浮動，頂端的長條盒子出現(xiàn)了塌陷

ex :

三，關于盒子塌陷的幾種解決方法

最簡單，直接，粗暴的方法就是盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止，這樣的好處是簡單方便，兼容性好，適合只改動少量內容不涉及盒子排布的版面，缺點是非自適應，瀏覽器的窗口大小直接影響用戶體驗。

給外部的父盒子也添加浮動，讓其也脫離標準文檔流，這種方法方便，但是對頁面的布局不是很友好，不易維護。

給父盒子添加overflow屬性。

1. overflow:auto; 有可能出現(xiàn)滾動條，影響美觀。
2. overflow:hidden; 可能會帶來內容不可見的問題。

父盒子里最下方引入清除浮動塊。最簡單的有：

<br style="clear:both;"/> 

有很多人是這么解決的，但是我們并不推薦，因為其引入了不必要的冗余元素 。

after偽類清除浮動。

外部盒子的after偽元素設置clear屬性。

#parent:after{
                clear: both;
                content: "";
                width: 0;
                height: 0;
                display: block;
                visibility: hidden;
            }

這是一種純CSS的解決浮動造成盒子塌陷方法，沒有引入任何冗余元素，推薦使用此方法來解決CSS盒子塌陷。

備注：第五種方法雖好，但是低版本IE不兼容，具體選擇哪種解決方法，可根據實際情況決定。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論