通常我們建立一全頁面的布局時，浮動是一種常用的方法，也是頁面元素定位的一種基本功能。浮動可以讓元素乙個挨著乙個。浮動可以建立乙個自然流布局，同時充許元素設定自身尺寸和其父元素容器的尺寸大小。
雖然 浮動 很好用，但是使用上還是存在一定的問題。最典型的問題就是乙個父元素包含了多個浮動的子元素。頁面的內容設定了乙個寬度，子元素的浮動確定了他們的位置，但浮動元素不會影響父元素的寬度。這樣做會讓父元素塌陷，從而使父元素的高度為「0」，以及忽略其他的屬性。
今天我們就來說說幾種清浮動的方法：
1、html的方法：
在容器的結束標籤前新增乙個空標籤，在空標籤上直接設定樣式「clear:both」。
缺點：用這種方法來清除浮動，在大多數情況下是有效的，但這不太適合語義化。而且如果有很多浮動需要清除，這樣就會造成頁面上的空標籤迅速堆積，而且在頁面中沒有上下文內容。
2、css的方法：
1、使用「overflow」屬性，在具有浮動元素的父容器中設定「overflow」的屬性值為「hidden」，這樣父容器就會有乙個高度存在。
缺點：當你新增樣式，或者將巢狀在裡面的子元素移動到父容器的外面，或者你想給元素新增乙個盒子陰影和製作乙個下拉列表。在下面的演示例子中，你可以看到元素的盒子陰影被切斷在父元素之內。
2、給父元素新增上 clearfix ：：before 或 clearfix ：：after 兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和後面建立隱藏元素。(推薦使用)
.clearfix：：after
目前解決浮動最推薦的方式
清浮動方法
1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...
主流清浮動方法
浮動 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另乙個浮動框的邊緣。浮動框不屬於文件中的普通流，當乙個元素浮動之後，不會影響到 塊級框的布局而只會影響內聯框 通常是文字 的排列，文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動...
浮動相關知識及清浮動方法
先了解一下文件流的概念，所謂文件流，就是指文件中可以顯示的物件在排列是所佔的位置。而浮動就是 使我們的元素脫離正常文件流，按照指定方向發生移動，直到碰到它的父元素邊界或另乙個浮動元素的邊界 浮動是讓元素水平方向移動，不能上下移動 浮動屬性 float left 左浮動 float right 右浮動...