為什麼要清除浮動：
當子元素為設定浮動時，父元素的一些樣式會無法正常顯示，如給父元素設定的邊框，背景，背景顏色都會受到影響，不僅如此，還會給父元素的同級元素的排版帶來影響。
產生浮動的原因：
由於父元素沒有設定具體的高度(有時為了適應子元素中的內容，一般是不給父元素設定高度的，而是根據子元素的內容自動確定父元素的高度)，加上子元素設定了浮動，就會使父元素中的內容無法展開，從而破壞了正常的文件流，造成父元素一些樣式無法正常顯示，父元素的同級元素排版受到影響的問題。
例項：
在#main元素中給兩個子元素#left，#right分別設定為左右浮動，並給#main設定邊框和背景顏色。
**：
清除浮動head
left
right
footer
我們會發現，#main的邊框被擠成一條線了,而本應該在#main下的#footer元素卻直接
跑到#head塊下了。這就是設定浮動後帶來的影響。
為了讓#main塊正常顯示其樣式，我們需要清除浮動帶來的影響。
解決浮動常用的三種辦法：
1)給父元素設定高度
父元素高度=子元素高度+子元素上下邊框大下
給#main元素加上以下**：
height:404px;
2)新增新的元素,應用clear:both；
在left
right
中新增乙個新的塊,**如下:
並設定相應的樣式:
#clear
3)給父元素塊新增overflow：auto
#main
原理:此屬性是設定讓父元素中的內容緊貼父元素,從而達到清除浮動的作用。
清除浮動後再瀏覽器中開啟的效果：
CSS清除浮動的三種方法
說說 float 的幾個要點就行了 只有左右浮動，沒有上下浮動。元素設定 float 之後，它會脫離普通流 和 position absolute 一樣 不再佔據原來那層的空間，還會覆蓋下一層的元素。浮動不會對該元素的上乙個兄弟元素有任何影響。浮動之後，該元素的下乙個兄弟元素會緊貼到該元素之前沒有設...
清除浮動的三種方法
lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...
清除浮動的三種方法
在我使用浮動時，為我們帶來了便利的同時也帶了一點影響，我們在使用浮動時往往不會給父級盒子新增高度，因為子盒子會撐起父盒子。這樣一旦我們使用浮動，則下面使用的div會跑到父級盒子的位置，畢竟使用浮動，不占有位置，解決此問題我列出了三種方法，希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...