我們在平常做項目的時候，float這個css屬性經常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。

什么是浮動

浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。

浮動的影響

浮動元素會使得父級元素高度塌陷

html:

<ul><li></li><li></li><li></li> </ul>

css:

* { // 實際項目中不要用通配符*去設置樣式margin: 0;padding: 0; } ul {border: 10px solid red; } li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left; }

效果圖：

由于浮動元素脫離文檔流，不再占據原來的文檔流空間，不能撐開父級的內容，所以父級的高度就不存在了。

下面我們將介紹清浮動的兩個大類。

清浮動的方法

clear清浮動（clearfix方案）

在css中專門有一個來解決高度塌陷的屬性，那就是我們常用的clear屬性。clear的用法如下：

clear: none | right | left | both | inherit;

下面對clear值的解釋來之w3c

• none：默認值。允許浮動元素出現在兩側。
• right：在右側不允許浮動元素。
• left：在左側不允許浮動元素。
• both：在左右兩側均不允許浮動元素。
• inherit：規定應該從父元素繼承 clear 屬性的值。

我們清除浮動的時候常用

clear: both;， 注意： clear屬性只對塊級元素起作用。

下面展示一個與clear值為both有關的例子。

html:

<ul><li></li><li></li><li></li><li></li><li></li> </ul>

css:

* {margin: 0;padding: 0; } li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left;margin-bottom: 10px; } li:nth-child(3) {clear: both; }

上面代碼所渲染出來的效果是下面的圖：

不知道當大家看到這個結果的時候，是不是開始懷疑w3c中的解釋了。實際上clear值為both指的是讓自身和前面的浮動元素不相鄰。沒錯，是前面的，并不是前面后面都兼顧，所以上面的例子中展示的效果是兩列而不是三列。

下面展示使用clear清浮動，接著最開始的代碼，我們對其進行清浮動。(注意下面只展示在最開始代碼中增加的代碼)

css:

ul {zoom: 1; // 為了兼容IE6/7 } ul:after { // 內聯content: ''; // 內容為空字符是為了不影響本來的domdisplay: block; // 這里的值也可以是table | list-item，只要能夠讓偽類成為塊級元素。clear: both; }

效果圖：

BFC清浮動

BFC的全稱block formatting context，中文意思是“塊級格式化上下文”。

BFC特性

“css世界的結界”（引自張鑫旭的《css世界》），在這個結界中內部子元素不管如何變化都不會對外部的元素有影響。BFC元素的margin不會發生折疊，因為margin折疊影響外部元素的布局。清除浮動，如果BFC不能夠清除浮動，那么BFC元素高度就會塌陷，那么內部的元素就會影響到其他的元素的布局，這跟前面說的BFC元素內部的子元素不會影響外部元素相違背。

BFC的實現：（引自張鑫旭的《css世界》）

• 根元素
• float的值非none
• overflow的值為auto、scroll、hidden
• display的值為table-cell、table-caption和inline-block
• position的值不為relative和static

css:

ul {overflow: auto; // 使浮動元素的父級成為BFC就行可以實現清浮動 }

效果如下圖：

大家有可能會有疑問只要一句話實現BFC，那為什么我們還要用上面的clearfix方案？

overflow: auto;不支持IE6/7。 overflow: hidden;不支持IE6，使用這個屬性容器外的元素可能被隱藏。

但是，大家想下現在使用IE6/7/8的用戶還有好多。我個人覺得現在我們沒必要去管IE6/7/8，拋棄那部分用戶對于我們的影響微不足道。上面這段話只是個人想法，并沒有想過讓他人必須這樣想，如果大家對這段有什么不滿請輕噴。

最后建議大家不要一味的使用clearfix方案。

總結

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

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