一、 目的

通過本文，讓大家可以明白清除浮動的原理和幾種方法，最后得出一種本文認為最好用的方法。 本文也會同步到我的個人網站。

---

二、 內容簡介

1、 引入，還原浮動本來的意義 2、 說明，實際開發中常用浮動來做什么 3、 提問，為什么要清除浮動 4、 回答，如何清除浮動以及常用的幾種方法 5、 結論，得出本文認為最好用的方法 復制代碼

---

三、 正文

1、 浮動本來的意義 浮動的意義原本僅是用來讓文字環繞在圖片周圍而已。

通過上圖可以看到，設置圖片左浮動可以將圖片從正常文檔流中抽取出來，后面的元素會忽略浮動元素原來的位置，所以可以看到以塊元素顯示的span標簽插入到了圖片下面，但是，我們發現文字卻不會嵌入到圖片下面，因為這就是浮動最純粹的意義--讓文字環繞在圖片周圍（關于為什么文字不會插入浮動元素下面在網上也有一些討論，大家可以去搜索一下，本文在此就不做更詳細的解釋了）。

PS: 如果想讓文字也插入到浮動元素下面，可以通過設置絕對定位來實現。

// html代碼<section><div class="origin1"><span>想象我是一大段文字</span></div><div class="float1"><span>想象我是一大段文字</span> </div></section> 復制代碼// css代碼 .origin1 span {display: block;width: 250px;height: 120px;background-color: #78f182; }.float1 img{float: left; }.float1 span {display: block;width: 250px;height: 120px;background-color: #78f182; } 復制代碼

2、 浮動經常被用來做什么 因為浮動可以讓塊狀元素并排顯示，所以經常用來做導航欄，內容分塊欄等布局。

// html代碼<section class="section2"><ul><li><a href="#">產品中心</a></li><li><a href="#">服務中心</a></li><li><a href="#">新聞中心</a></li><li><a href="#">客戶見證</a></li><li><a href="#">招賢納士</a></li></ul></section> 復制代碼// css代碼 .section2 li{list-style: none;float: left;padding: 20px;height: 20px;background-color: #1249c3;border-right: 1px solid #a0a2a2; }.section2 li a {color: #fff; } 復制代碼

3、 為什么要清除浮動

通過上圖可以看到，當三個板塊左浮動以后，因為它們脫離了正常文檔流，所以它們的父元素ul在不設置高度的情況下，無法被子元素撐開(能夠看到背景色是因為我設置了ul的padding為10px)，所以當你在后邊新增元素的時候，自然會排在ul后邊，也就是插入到了3個浮動的板塊下面。 這并不是我們想要的，這就是要清除浮動的原因。

// html代碼<ul><li><p>互動板塊 li</p></li><li><p>學習板塊 li</p></li><li><p>留言板塊 li</p></li>我是本應該包裹在3個板塊外面的父元素ul</ul><div class="new">我是跟在ul后面的新div</div> 復制代碼// css代碼 ul {padding: 20px;background-color: #b7db05; }ul li {width: 200px;height: 200px;background-color: #e3e3e3;margin-right: 20px;text-align: center;float: left; }.new {height: 50px;background-color: #1be751; } 復制代碼

4、 如何清除浮動 (1) 在最后一個浮動的 li 元素后邊新增一個空的塊狀元素div，并設置clear:both以清除所有浮動。

// html代碼<ul><li><p>互動板塊 li</p></li><li><p>學習板塊 li</p></li><li><p>留言板塊 li</p></li>我是本應該包裹在3個板塊外面的父元素ul<div style="clear:both;"></div> // 新增代碼</ul><div class="new">我是跟在ul后面的新div</div> 復制代碼

效果： ul后邊的div元素確實可以在浮動元素下邊排列，并且設置margin、padding等也是針對浮動元素的下邊框。 缺點： 多出了一個冗余標簽，并沒有任何結構意義。

(2) 設置父元素ul的overflow: hidden或者overflow: auto。

// css代碼 ul {padding: 20px;background-color: #e7a5b8;overflow: hidden; } 復制代碼

效果： 對于ul后面的元素來說，它們可以在浮動元素下邊依次排列了。 缺點： 采用這種overflow方法時可能會對采用定位position的元素產生影響，因為在ul的范圍內，超出的部分將會被隱藏，所以如果定位元素處在ul超出的范圍內，那么會被隱藏。

(3) 采用偽類方法，在最后一個浮動元素的后邊，添加clear:both。

// css代碼 ul:after {content: "";clear: both;display: block; } 復制代碼

效果： 很好的清除了浮動帶來的影響，并且沒有附加作用，也沒有新增無語義的標簽。 缺點： 暫時還沒發現。

---

####四、 結論 綜上所述，本文認為最好用的方法是采用after偽類來清除浮動帶來的影響，歡迎大家前來討論。

總結

以上是生活随笔為你收集整理的CSS3 - 清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。