css盒子塌陷問題,以及解決塌陷的5種方法

2021-10-09 20:12:31 字數 536 閱讀 6204

一:為什麼盒子會塌陷?

原因:當父元素沒設定足夠大小的時候,而子元素設定了浮動的屬性,子元素就會跳出父元素的邊界(脫離文件流),尤其是當父元素的高度為auto時,而父元素中又沒有其它非浮動的可見元素時,父盒子的高度就會直接塌陷為零, 我們稱這是css高度塌陷。

二:怎麼清除塌陷?

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

2、給外部的父盒子也新增浮動,讓其也脫離標準文件流,這種方法方便,但是對頁面的布局不是很友好,不易維護。

3、給父盒子新增overflow屬性。

overflow:auto; 有可能出現滾動條,影響美觀。

overflow:hidden; 可能會帶來內容不可見的問題。

5、after偽類清除浮動。

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

CSS盒子塌陷問題的討論

什麼是盒子塌陷 理論上在父元素內部的元素 出現在盒子外部 出現原因?乙個父親不能被自己浮動的兒子,撐出高度。當父元素未設定 足夠 高度的時候,子元素設定了浮動的屬性時,子元素就會跳出父元素的邊界 脫離文件流 當父元素的高度為auto時,而父元素中又沒有其它非浮動的可見元素時,父盒子的高度就會直接塌陷...

CSS盒子塌陷問題解決方案

什麼是盒子塌陷?外部盒子本應該包裹住內部的浮動盒子,結果卻沒有。問題出現的原因 父元素只包含浮動元素,那麼它的高度就會塌縮為零 前提就是你們沒有設定高度 height 屬性,或者設定了為auto,就會出現這種情況,如果父元素不包含任何的可見背景,這個問題會很難被注意到。因為子元素設定了float屬性...

css控制HTML的盒子塌陷問題

在使用css來控制html樣式時可以會出現自己預想外的布局,這裡就可能會是html語言本身的問題 個人理解 比如盒子塌陷問題。在兩個巢狀的塊級元素 獨佔一行可以設定寬高的html標籤 中,設定了子元素的margin top屬性時會導致父元素一起下沉。這就是盒子塌陷問題。可以給父元素加乙個邊框 給父元...