2019獨角獸企業重金招聘Python工程師標準>>>

先上clear和clearfix的代碼：

.clear{clear: both;display: block;font-size: 0;height: 0;line-height: 0;overflow: hidden;}.clearix{zoom: 1;}.clearfix:after{clear: both;overflow: hidden;content: "";display: block;}

這些代碼都很眼熟了

接上來上例子的css代碼：

.fl{float:left;}.demo{background:#ccc;}.item1{background:#f90;height:100px;width:100px;}.item2{background:#fc0;height:200px;width:100px;}

例子html代碼：

<h2>用 clear 清除浮動</h2><div class="demo"><div class="fl item1"></div><div class="fl item2"></div><div class="clear"></div> </div><h2>用 clearfix 清除浮動</h2><div class="demo clearfix"><div class="fl item1"></div><div class="fl item2"></div></div>

很簡單的例子，需要關注的是，.demo沒有高度，代碼的愿景是.demo元素的高度由子元素的高度決定的。但是由于其子元素都是浮動的，官方說法是脫離了文檔，導致.demo的高度沒有被撐開，于是看不到.demo的灰色背景。

解決方法有很多，先了解兩種，clear和clearfix； 就如代碼上看的clear方法是在.demo的里面的最后加上一個有clear類的子元素。加上之后，意思是，.demo里面的浮動在這句之后就結束了，也就是傳說中的清除浮動（clear:both屬性是關鍵），所以.demo高度就被其子元素撐開了。

其實clearfix方法也是類似，應該只是用法不同而已； clearfix:after規定了在.demo內容后面跟上一個內容為空的東西，而且這玩意還有clear:both等屬性，于是也清除浮動了。clearfix一般加在.demo里面，也就是浮動元素的父親。不過像clear創建一個空的div元素，給它加上clearfix類也可以，原理一樣。

轉載于:https://my.oschina.net/daladida/blog/725642

總結

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

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