一、 目的
通過本文，讓大家可以明白清除浮動的原理和幾種方法，最後得出一種本文認為最好用的方法。 本文也會同步到我的個人**。
二、 內容簡介
1、 引入，還原浮動本來的意義
2、 說明，實際開發中常用浮動來做什麼
3、 提問，為什麼要清除浮動
4、 回答，如何清除浮動以及常用的幾種方法
5、 結論，得出本文認為最好用的方法
複製**
1、 浮動本來的意義浮動的意義原本僅是用來讓文字環繞在周圍而已。
通過上圖可以看到，設定左浮動可以將從正常文件流中抽取出來，後面的元素會忽略浮動元素原來的位置，所以可以看到以塊元素顯示的span標籤插入到了下面，但是，我們發現文字卻不會嵌入到下面，因為這就是浮動最純粹的意義--讓文字環繞在周圍（關於為什麼文字不會插入浮動元素下面在網上也有一些討論，大家可以去搜尋一下，本文在此就不做更詳細的解釋了）。
ps: 如果想讓文字也插入到浮動元素下面，可以通過設定絕對定位來實現。
// html**
"origin1">
![img](
想象我是一大段文字
"float1">
![img](
想象我是一大段文字
複製**
// css**
.origin1 span
.float1 img
.float1 span
複製**
// html**
"section2">
複製**
// css**
.section2 li
.section2 li a
複製**
通過上圖可以看到，當三個板塊左浮動以後，因為它們脫離了正常文件流，所以它們的父元素ul在不設定高度的情況下，無法被子元素撐開(能夠看到背景色是因為我設定了ul的padding為10px)，所以當你在後邊新增元素的時候，自然會排在ul後邊，也就是插入到了3個浮動的板塊下面。這並不是我們想要的，這就是要清除浮動的原因。
// html**
"new">我是跟在ul後面的新div
複製**
// css**
ul ul li
.new
複製**
// html**
"new">我是跟在ul後面的新div
複製**
效果： ul後邊的div元素確實可以在浮動元素下邊排列，並且設定margin、padding等也是針對浮動元素的下邊框。缺點： 多出了乙個冗餘標籤，並沒有任何結構意義。
(2) 設定父元素ul的overflow: hidden或者overflow: auto。
// css**
ul 複製**
效果： 對於ul後面的元素來說，它們可以在浮動元素下邊依次排列了。缺點： 採用這種overflow方法時可能會對採用定位position的元素產生影響，因為在ul的範圍內，超出的部分將會被隱藏，所以如果定位元素處在ul超出的範圍內，那麼會被隱藏。
(3) 採用偽類方法，在最後乙個浮動元素的後邊，新增clear:both。
// css**
ul:after
複製**
效果： 很好的清除了浮動帶來的影響，並且沒有附加作用，也沒有新增無語義的標籤。缺點： 暫時還沒發現。
css3 清除浮動
eg 三個div，父級div下面有兩個div分別float left和float right 1 style 2.container 3.fl 4.fr 5style 6 body 7 div class container 8 div class fl 向左浮動 div 9 div class f...
CSS3浮動與清除浮動
浮動的設計初衷 實現文字環繞效果。浮動的特徵 脫離標準文件流，導致父元素高度塌陷，向左或者向右浮動直到遇到其他的浮動元素。浮動產生的原因 盒子裡的子元素使用了浮動屬性，脫離了文件流，導致父元素無法被撐開。浮動造成的 父級的背景無法顯示，父級的邊框無法被撐開，以及父級與子級之間的margin和padd...
CSS3清除浮動3種方法
浮動這裡要好好琢磨一下，挺麻煩，但是不難。問題 如果乙個父容器，兩個子容器div，兩個子容器為了顯示，乙個左浮動，乙個右浮動，兩個子容器都脫離了文件流，造成父容器沒有元素，這種情況下該怎麼做？問題如下圖 兩種方法 1，在兩個div後再設定乙個div，並且不設定寬高 寬高為0 然後清除上面兩個div浮...