浮動屬性float，在css中應用廣泛，寫網頁時可以用來水平布局，其中使用最頻繁的兩個屬性值就是left和right；乙個靠左浮動，乙個靠右浮動。實際中寫頁面的時候呢，父盒子一般不給高度height，因為內容會把父盒子撐開。但是，如果此時給子盒子新增了浮動屬性，會怎麼樣呢？首先來說一下浮動的特點：
浮動的特點呢？1、「飄起來了」：浮動後的元素會脫離標準流，在標準流中不佔位置，並且比標準流的元素高半個級別 2、「怕上欺下」：浮動的元素只會影響自身下面的布局，並且受到自身上面元素邊界的影響 3、「排排坐」：浮動後，一行可以顯示多個元素，並且能設定寬高（例如行內元素a標籤浮動後，就能自由設定寬高了！）。
既然浮動後的子盒子會脫標，那麼子盒子就撐不起來父盒子了！也就是，如果父盒子沒有設定高度，此時父盒子高度由內容撐開，但是如果子元素浮動了，不佔位置了，不能撐開盒子了，此時父盒子的高度為0。
額外標籤法：給父元素的最後新增乙個塊級元素，再給新增的塊級元素設定乙個清除浮動的核心**：clear:both。
class
="w"
>
class
="v"
>
div>
class
="m"
>
div>
div>
.w.w .v
/* 再給新增的塊級元素設定乙個清除浮動的核心**：clear:both。 */
看看效果吧：父元素被撐開了！說明這個方法能清除浮動帶來的影響，但是，有沒有發現，這個方法雖然能成功清除浮動，但是在html頁面中新增了額外的標籤（所以稱為額外標籤法）？！那麼如果有n個需要清除浮動的父盒子，那麼頁面就會多n個額外的標籤，這樣不僅會影響頁面的結構，更也會頁面增添許多的負擔，所以這個方法有致命的缺點！所以，我們要尋求更高效節能的方法。
同樣的，再品品，額外標籤法，給父元素的最後新增乙個塊級元素，再給新增的塊級元素設定乙個清除浮動的核心**：clear:both。如果說，直接在html新增塊元素，會導致也頁面結構複雜化，那麼我們可以利用css在html頁面設定偽元素來實現。如何使用偽元素來實現呢？回歸本質，來拆分：
1、「給父元素的最後新增乙個元素」父元素::after****
2、」這個元素的類別是塊級「display:block
3、「設定乙個清除浮動的核心**」clear:both
ok，將後兩個屬性+屬性值設定給父元素的尾部偽元素，來看一下實際效果：
完成！在實際開發中，我們可以在css初始化中，將清除浮動單獨設定乙個類選擇器.clearfix{}，html中哪個父盒子需要清除浮動，就在它的class中加入clearfix！完美！
.clearfix::after
直接給父盒子的樣式css新增：overflow:hidden，即可清除浮動。
這個方法同樣能清除浮動！需要清除浮動的父盒子，直接加上這一句**即可！
既然父盒子沒有設定高度，子盒子設定浮動後不能撐開父盒子，那麼直接給父盒子新增高度不就好了》。<
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...