CSS盒子塌陷問題解決方案

2021-07-23 11:07:55 字數 1110 閱讀 1152

什麼是盒子塌陷?

外部盒子本應該包裹住內部的浮動盒子,結果卻沒有。

問題出現的原因

父元素只包含浮動元素,那麼它的高度就會塌縮為零(前提就是你們沒有設定高度(height)屬性,或者設定了為auto,就會出現這種情況,如果父元素不包含任何的可見背景,這個問題會很難被注意到。

因為子元素設定了float屬性,而float屬性會把元素從標準文件流中抽離,直接結果就是外部盒子丟了兩個孩子,因為內部沒有其它盒子了,所以外部盒子只包裹文字節點內容,卻把兩個內部盒子扔在外面了。

解決方案

上面分析了問題出現的原因,不難找到第一種解決方案(既然孩子丟了,那就去找唄)——給外部盒子也新增浮動

把外部盒子也從標準文件流中抽離,讓它和孩子們見面。

缺點:可讀性差,不易於維護(別人很難理解為什麼要給父元素也添上float),而且可能需要調整整個頁面布局。

在外部盒子內最下方添上帶clear屬性的空盒子

可以是div也可以是其它塊級元素,把

放在盒內底部,用最下面的空盒子清除浮動,把盒子重新撐起來。

缺點:引入了冗餘元素

用overflow:hidden清除浮動

給外部盒子添上這個屬性就好了,非常簡單。

缺點:有可能造成溢位元素不可見,影響展示效果。

用after偽元素清除浮動

給外部盒子的after偽元素設定clear屬性,再隱藏它

這其實是對空盒子方案的改進,一種純css的解決方案,不用引入冗餘元素。

.clearfix

.clearfix

:before,.clearfix

:after

.clearfix

:after

這也是bootstrap框架採用的清除浮動的方法。

題外話

其實還有一種最直接的辦法:給每個盒子規定width和height,要多大給多大即可。但這並不算什麼解決方案,因為這樣的布局不是內容自適應的,但如果頁面內容極少發生變動,這也是乙個不錯的方案,因為它的相容性是毋庸置疑的。

CSS高度塌陷問題解決方案

高度塌陷的存在 原因分析 1doctype html 2 html 3 head 4 meta charset utf 8 5 title title 6 style type text css 78 box1 1314 box2 3435 box3 3940 style 41head 42 bod...

Jar Hell 問題解決方案

最近看到溫紹錦的jvm基礎,裡面看到這個jar hell問題的解決方法,之前遇到過一次,是乙個資源檔案,當時覺得挺麻煩,不知道還有這個方法,很棒,特地整理了下,記錄到這裡來,這個部落格開了好長時間了,一直以來也懶得寫東西,以後會堅持更新些。classloader classloader thread...

top K問題解決方案

1.使用最大最小堆。求最大的數用最小堆,求最小的數用最大堆。2.quick select演算法。使用類似快排的思路,根據pivot劃分陣列。3.使用排序方法,排序後再尋找top k元素。4.使用選擇排序的思想,對前k個元素部分排序。5.將1000 個數分成m組,每組尋找top k個數,得到m k個數...