目錄
1 什麼是浮動？
2 float屬性取值
3 浮動的特點
4 清除浮動
為什麼要清除浮動
清除浮動本質
1 clear屬性用於清除浮動
2 額外標籤法
3 父級新增overflow屬性方法
4 使用after偽元素清除浮動
5 使用before和after雙偽元素清除浮動
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，並不是清除浮動，而是清除浮動後造成的影響
如果浮動一開始就是乙個美麗的錯誤，那麼請用正確的方法挽救它。
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。 其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裡面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
選擇器屬性值描述
left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
，或則其他標籤br等亦可。
優點： 通俗易懂，書寫方便
可以給父級新增： overflow為 hidden|auto|scroll 都可以實現。缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。4
:after 方式為空元素的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after
.clearfix /* ie6、7 專有 */
缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
注意： content:"." 裡面盡量跟乙個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...