詳解CSS盒子塌陷的5種解決方法

發(fā)布時(shí)間：2019-10-28 16:08:09 作者：kirinlau

這篇文章主要介紹了詳解CSS盒子塌陷的5種解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一，盒子塌陷是什么？

本應(yīng)該在父盒子內(nèi)部的元素跑到了外部。

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

當(dāng)父元素沒(méi)設(shè)置足夠大小的時(shí)候，而子元素設(shè)置了浮動(dòng)的屬性，子元素就會(huì)跳出父元素的邊界（脫離文檔流），尤其是當(dāng)父元素的高度為auto時(shí)，而父元素中又沒(méi)有其它非浮動(dòng)的可見(jiàn)元素時(shí)，父盒子的高度就會(huì)直接塌陷為零，我們稱(chēng)這是CSS高度塌陷。

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

ex :

三，關(guān)于盒子塌陷的幾種解決方法

最簡(jiǎn)單，直接，粗暴的方法就是盒子大小寫(xiě)死，給每個(gè)盒子設(shè)定固定的width和height，直到合適為止，這樣的好處是簡(jiǎn)單方便，兼容性好，適合只改動(dòng)少量?jī)?nèi)容不涉及盒子排布的版面，缺點(diǎn)是非自適應(yīng)，瀏覽器的窗口大小直接影響用戶(hù)體驗(yàn)。

給外部的父盒子也添加浮動(dòng)，讓其也脫離標(biāo)準(zhǔn)文檔流，這種方法方便，但是對(duì)頁(yè)面的布局不是很友好，不易維護(hù)。

給父盒子添加overflow屬性。

overflow:auto; 有可能出現(xiàn)滾動(dòng)條，影響美觀。
overflow:hidden; 可能會(huì)帶來(lái)內(nèi)容不可見(jiàn)的問(wèn)題。

父盒子里最下方引入清除浮動(dòng)塊。最簡(jiǎn)單的有：

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

有很多人是這么解決的，但是我們并不推薦，因?yàn)槠湟肓瞬槐匾娜哂嘣?。

after偽類(lèi)清除浮動(dòng)。

外部盒子的after偽元素設(shè)置clear屬性。

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

這是一種純CSS的解決浮動(dòng)造成盒子塌陷方法，沒(méi)有引入任何冗余元素，推薦使用此方法來(lái)解決CSS盒子塌陷。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。