1 浮動簡介

CSS浮動是指浮動元素會脫離“文檔流”并向左或向右浮動，允許文本和內聯元素環繞它，直到碰到父元素或者另一個浮動元素。

需要注意的是，在CSS定位中absolute絕對定位以及fixed固定定位屬于完全脫離文檔流，其位置即不受其他元素影響，也不會影響到其他元素。而CSS浮動屬于半脫離文檔流，因為文本和內聯元素會環繞浮動元素，這個也是float浮動屬性被設計出來的初衷。

下面舉個具體的例子，代碼如下：

.content {border: 5px solid pink;border-radius: 5px;width: 500px; } .image {width: 150px; } .text {font-size: 14pt; } <!-- 省略內容部分 --> <div class="content"><img class="image" src=""><div class="text">...</div> </div>

效果如下：

下圖是給圖片image設置左浮動float: left;后的效果：

注意：將文本換成內聯元素（a、b、span、img、input、…）也能實現內容環繞圖片的效果。

若把圖片的浮動換成絕對定位position: absolute;，其效果如下：

可以發現文字并不會環繞圖片，而是直接被圖片覆蓋了。

2 為什么要清除浮動

當頁面中還存在其他元素時，浮動可能會對其他元素的布局造成影響，如下圖所示，此時頁面并無異常：

但把文本內容減少后，如下圖所示：

可以發現粉色框由于文本內容的減少，其高度也會隨之減小，由于粉色框在計算高度時，不會計算浮動元素的高度，因此粉色框的高度為其中文本內容（沁園春雪）的高度。這樣導致藍色框上移而被圖片覆蓋，此時就要清除浮動，使粉色框高度撐開包裹圖片，避免影響到藍色框中的內容。

清除浮動究其本質為父容器未設置高度且子元素設置浮動時，父容器的高度不能被內容撐開（高度塌陷）。此時，元素會溢出到容器外而影響布局。

3 清除浮動clear屬性

clear屬性用于指定一個元素的左側或右側是否允許出現浮動元素，可能的取值如下：

值描述

left	左側不允許出現浮動元素
right	右側不允許出現浮動元素
both	左側和右側不允許出現浮動元素
none	默認值，允許左側和右側出現浮動元素

給文本添加clear: left;樣式屬性，表示文本的左側不允許出現浮動元素，由于圖片事先設置了浮動，所以文本會另起一行顯示，效果如下：

這樣雖然解決了粉色框高度塌陷問題，但是卻失去了文字環繞效果。

4 清除浮動的方法

4.1 額外標簽法

從第三章的例子中可以獲得靈感，文本在添加clear: left;樣式屬性清除左浮動后，會在圖片下另起一行顯示，所以粉色框的高度被撐開，解決了高度塌陷問題，那么完全可以用其他的元素來做這件事情，讓文本依然處于原來的位置，這就是額外標簽法，在浮動元素父級的末尾添加一個空的塊級元素即可，再為其添加clear: both樣式屬性：

<!-- 省略內容部分 --> <div class="content"><img class="image" src=""><div class="text">沁園春雪</div><!-- 額外標簽 --><div style="clear: both"></div> </div> <div class="footer text">毛澤東詩詞</div>

效果如下：

4.2 after偽元素法

偽元素after的作用是在元素之后添加一個子元素，但是這個元素并不會存在于DOM中，因此被稱為偽元素。其實偽元素法和額外標簽法的原理一樣，都是通過在浮動元素父級的末尾添加一個空的元素來撐開父級元素的高度，使得浮動元素依然能包裹在父級盒子中，達到清除浮動的效果，只不過區別在于額外標簽法添加的是一個真實的元素，而偽元素法添加的是偽元素。定義clearfix類的after偽元素如下：

.clearfix:after {content: "";display: block;clear: both; }

將偽元素類clearfix添加到父級元素content上：

<!-- 省略內容部分 --> <div class="content clearfix"><img class="image" src=""><div class="text">沁園春雪</div> </div> <div class="footer text">毛澤東詩詞</div>

效果如下：

4.3 觸發BFC清除浮動

BFC（Block formatting context）為塊級格式化上下文，BFC可以理解為CSS中一個獨立的布局環境，BFC中的元素布局不受外部元素的影響，BFC在計算高度時，內部浮動元素的高度也要計算在內，因此就避免了高度塌陷問題。

觸發BFC的方式有很多種，詳見BFC-MDN，這里選擇最為常用的給父元素添加overflow: hidden屬性的方式：

.content {/* ... */overflow: hidden; }

效果如下：

5 總結

常用的清除浮動方法從原理上來講只有兩種：

撐開父元素高度（額外標簽法、after偽元素法）

觸發BFC機制

在實際項目中選擇清除浮動的方法需要具體問題具體分析，不同的方法也有自身的優缺點，如額外標簽法雖然兼容性好，但是會在頁面中添加空標簽，降低了代碼可讀性；而after偽元素法又可能產生IE瀏覽器的兼容問題。

總結

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

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