為什么要清除浮動

雖然說現在 9102 年了應該不會再有人用 float 了，但是有些老網頁還是會有 float 來布局的。float 帶來的主要問題是高度坍塌。如：

<div class="parent"><div class="children"></div> </div>

在子元素設置了 float 后，父元素的高度就沒了。

.parent {border: 1px solid green; }.children {float: left;height: 100px;widtH: 100px;border: 1px solid red; }

結果：

主要的原因是因為設置了 float 之后，子元素就脫離文檔流，也就相當于浮在父元素上了，從二維變到了三維。父元素里面就中空了，高度也為0了，不再是子元素高度。

解決方法一般有兩個。

overflow

最簡單但是會帶有副作用的方法是在父元素上添加一個 overflow:hidden 就可以了。

.parent {overflow: hidden;border: 1px solid green; }.children {float: left;height: 100px;widtH: 100px;border: 1px solid red; }

結果：

但是如果代碼多了，每個地方都要加這一句很麻煩，而且有可能父元素 oveflow:hidden 和別的樣式沖突就麻煩了。

clearfix

我們可以使用另一個方法，也是推薦的方法。首先定義一個 .clearfix 的類

.clearfix::after{content: ''; display: block; clear:both;}.clearfix{zoom: 1; /* IE 兼容 */}

然后將這個類添加到父元素上就可以了。

<div class="parent clearfix"><div class="children"></div> </div>

這樣的副作用基本是沒有的，而且只需要在父元素上添加 class 類就好了，更方便。

總結

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

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