當乙個元素只包含浮動元素的時候，它會出現高度摺疊(在火狐中是這樣，ie9不會),即元素的上下底邊重合，和高度為0效果一樣，下面是解決這個問題的4種方法。
首先我麼看最原始的情況，下面是**:
複製**
**如下:
float
執行結果:
本來ul的背景色被設定成blue，但是由於它出現了高度摺疊，所以看不到背景色。
1 給包含元素設定高度height
最直接的辦法是給包含元素設定乙個高度，在本例中就是給ul標籤新增height屬性，新增後的**如下:
複製**
**如下:
ul
但是這種方法有乙個缺點，就是包含元素的高度不能自適應內容。比如我們在新增多個列表項，那麼高度又不夠了。
2 利用overflow屬性
可以包含元素設定overflow屬性，並設定屬性值為auto或者hidden，新增後的**如下:
複製**
**如下:
ul
這種方式沒有直接設定height屬性的限制，但是當包含元素的overflow屬性必須設定為visible時，這種方法失效。
3 新增乙個空的div
這種方法是新增乙個空的div，這個div和浮動元素同一級別，且位於浮動元素的最後。這種方法要改動兩個地方，乙個是html**，另乙個是必須要為這個div新增乙個clear屬性：
複製**
**如下:
float
這種方法雖然也能解決高度問題，但是卻引入了乙個多餘的標籤div，它這裡並不具有實際意義，它的作用只是撐開ul標籤而已。
4 利用偽元素:after
用這種方法時要為包含元素先新增乙個類名，這裡為ul標籤設定的類名.clearul,**如下:
複製**
**如下:
float
程式設計客棧
在:after為元素裡面用到了content屬性，這樣這條樣式的意思是在ul元素後面生成指定的內容，這裡生成的內容是乙個空字串，因為只是讓它來消除ul標籤的高度摺疊，並不讓它顯示出來。還有，這條樣式裡有display屬性，要將他設定成block，這樣clear屬性才會起作用，因為清除操作只作用於塊級元素，它的原理是為要執行清除操作的元素新增上邊距，以此讓元素降到浮動元素的下面，而操作行內元素的上邊距不起作用。
本文標題: css浮動中避免包含元素高度為0的4種解決方法
本文位址:
css浮動中避免包含元素高度為0的4種解決方法
當乙個元素只包含浮動元素的時候，它會出現高度摺疊，即元素的上下底邊重合，和高度為0效果一樣，針對這個問題與大家分享四種解決方法，感興趣的你可以參考下本文或許對你更好的理解css有所幫助 當乙個元素只包含浮動元素的時候，它會出現高度摺疊 在火狐中是這樣，ie9不會 即元素的上下底邊重合，和高度為0效果...
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。如 或 方法...