什麼是css清除浮動？
網路上流行的說法是：在非ie瀏覽器（如firefox）下，當容器的高度（height） 為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到 容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，就叫css清除浮動。」
對於這種因為內部擁有浮動元素而導致parent容器在高度自適應時，只能根據無浮動的元素進行高度的自適應（類似於下種情況）：
html部分：
class
="parent"
>
class
="child1"
>
class
="child2"
>
.parent
.child1
.child2
「第一種，在parent容器中，在子元素的最後（以例子為參考在child2後）加入乙個空的塊級元素，並給它乙個擁有clear：both屬性的clear的類選擇器。」
html**：
class
="parent"
>
class
="child1"
>
class
="child2"
>
class
="clear"
>
.parent
.child1
.child2
.clear
/*新增空元素用於清除浮動*/
優點：簡單，**少，瀏覽器支援好
缺點：如果頁面浮動布局多，則需要很多空標籤
「第二種，在parent容器中新增overflow：auto的屬性，並針對於ie6增加zoom:1的屬性。」
html部分：
class
="parent"
>
class
="child1"
>
class
="child2"
>
.parent
優點：不存在結構和語義化問題，**量極少
缺點：多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度.
「第三種，在parent容器新增乙個：after偽元素，並使用content："."或者為" "在元素的後面生成了內容為乙個點的塊級元素，並使用一切方法使這個塊級元素隱藏並清除浮動clear:both。」
html部分不變。
css部分（新增.parent:after偽物件，其餘不變）:
.parent
:after
（資質代辦）
執行效果不變。
「第四種，讓parent容器也浮動。」
只需給parent容器新增 float：left，也可閉合浮動。
優點：**少
缺點：會導致整個頁面大部分都處於浮動狀態，容易出現問題
針對於這4種方法我更常用第一種和第三種，個人覺得這2種方法結果清晰，而且不會發生的大的錯誤，推薦使用。清除浮動 or 閉合浮動？
在網頁布局中我們會經常用到浮動，有了它我們可以更容易地實現我們想要的效果，但浮動過後往往會留下一些隱患。這時，我們通常會做一件事清除浮動，但清除浮動也會經常留下隱患，如下 效果圖如下 雖然foot中使用clear both清除浮動，但是main的高度無法自適應子元素的高度，導致塌陷 箭頭所指 下面介...
關於清除浮動與閉合浮動
在給html新增樣式的構成中，css是必不可少的的，然而css中有一些功能的實現可以通過不同的方法實現，通過效果檢視好像並沒有什麼不同，那它們之間到底有什麼本質區別呢，又有哪些概念被我們無意的忽略或者無視了呢，突然想總結總結這一類的問題，本篇隨筆算是本人對於 清除浮動 的歸納吧.在布局的時候我們經常...
CSS中常用的清除浮動（閉合浮動）的方法
1.使用空標籤清除浮動。即 這種方法在大部分環境下可以使用，但是在有些情況下會出現相容問題 ie6瀏覽器當中，div即使是空的，也會存在預設行高。解決辦法 設定其高度為0，並設定overflow hidden。它的主要弊端在於在頁面中增加了乙個無意義的元素 2.使用overflow hidden 此...