當乙個元素只包含浮動元素的時候,它會出現高度摺疊,即元素的上下底邊重合,和高度為0效果一樣,針對這個問題與大家分享四種解決方法,感興趣的你可以參考下本文或許對你更好的理解css有所幫助
當乙個元素只包含浮動元素的時候,它會出現高度摺疊(在火狐中是這樣,ie9不會),即元素的上下底邊重合,和高度為0效果一樣,下面是解決這個問題的4種方法。
首先我麼看最原始的情況,下面是**:
本來ul的背景色被設定成blue,但是由於它出現了高度摺疊,所以看不到背景色。
1 給包含元素設定高度height
最直接的辦法是給包含元素設定乙個高度,在本例中就是給ul標籤新增height屬性,新增後的**如下:
ul
2 利用overflow屬性
可以包含元素設定overflow屬性,並設定屬性值為auto或者hidden,新增後的**如下:
ul
這種方式沒有直接設定height屬性的限制,但是當包含元素的overflow屬性必須設定為visible時,這種方法失效。
3 新增乙個空的div
這種方法是新增乙個空的div,這個div和浮動元素同一級別,且位於浮動元素的最後。這種方法要改動兩個地方,乙個是html**,另乙個是必須要為這個div新增乙個clear屬性:
4 利用偽元素:after
用這種方法時要為包含元素先新增乙個類名,這裡為ul標籤設定的類名.clearul,**如下:
在:after為元素裡面用到了content屬性,這樣這條樣式的意思是在ul元素後面生成指定的內容,這裡生成的內容是乙個空字串,因為只是讓它來消除ul標籤的高度摺疊,並不讓它顯示出來。還有,這條樣式裡有display屬性,要將他設定成block,這樣clear屬性才會起作用,因為清除操作只作用於塊級元素,它的原理是為要執行清除操作的元素新增上邊距,以此讓元素降到浮動元素的下面,而操作行內元素的上邊距不起作用。
css浮動中避免包含元素高度為0的4種解決方法
問題 當子元素中使用了float時,如果其父元素不指定高度,其高度將為0 解決 清除 閉合 浮動元素,使其父div高度自適應 方法一 額外標籤 clear both w3c推薦方法,相容性較好 在父div的最後插入乙個無語義的額外標籤,使其style為clear both。如 或 方法二 使用aft...
css浮動中避免包含元素高度為0的4種解決方法
問題 當子元素中使用了 float 時,如果其父元素不指定高度,其高度將為 0解決 清除 閉合 浮動元素,使其父 div高度自適應 方法一 額外標籤 clear both w3c 推薦方法,相容性較好 在父div 的最後插入乙個無語義的額外標籤,使其 style 為clear both。如 或 方法...
css浮動中避免包含元素高度為0的4種解決方法
當乙個元素只包含浮動元素的時候,它會出現高度摺疊 在火狐中是這樣,ie9不會 即元素的上下底邊重合,和高度為0效果一樣,下面是解決這個問題的4種方法。首先我麼看最原始的情況,下面是 複製 如下 float 執行結果 本來ul的背景色被設定成blue,但是由於它出現了高度摺疊,所以看不到背景色。1 給...