通過指定CSS屬性float的值,從而使元素向左或向右浮動,然后由后繼元素向上移動以填補前面元素的浮動而空出的可用空間。CSS的float屬性，作用就是改變塊元素對象的默認顯示方式，HTML標簽設(shè)置了float屬性之后，它將不再獨自占據(jù)一行，從而可以實現(xiàn)多個元素同處一行的效果。Float的功能很強大，但是如果沒有好好掌握而使用很可能會成為你調(diào)試樣式的噩夢。

使用Float樣式，如果沒有清除浮動，那么有浮動元素的父元素容器將無法自動撐開。如果沒有清除內(nèi)部浮動，此時會導(dǎo)致浮動的父元素?zé)o法自動撐開到本身應(yīng)有的高度。也就是說：當一個元素是浮動的，如果沒有關(guān)閉浮動時，其父元素不會包含這個浮動元素，因為此時浮動元素從文檔流中脫離。

所以需要在樣式定義的后面進行清除浮動，清除浮動的方法有幾種：

?

1.Clear:both清除浮動

?

clear清除浮動主要是借用clear屬性來清除浮動，這是一種比較陳舊的清除浮動方法，但是感覺一般遇到這種問題都會用這種方法去清除浮動。使用clear:both來清除浮動，我們需要在需要清除浮動地方的后面緊接著增加一個額外元素，比如說一個div標簽，并且定義他們的樣式為“clear:both”,其通常使用的結(jié)構(gòu)方式如下：

?

<div class="demo A"><div class="demoB demoFloat">float left</div><div class="demoC demoFloat">float right</div><div class="demoD demoFloat">not float</div><div class="clear"></div>
</div>

  .clear {clear:both;/*主要使用這個屬性來清除浮動*//*為了不讓ie具有一定的空間，個人建議加上下面三個屬性*/height: 0;line-height: 0;font-size: 0;}

?

?

2.使用overflow

用overflow方法來清除浮動相對來說比較簡單，只需要在有浮動的元素上面加上下面的屬性：

?

 .A {overflow: auto;zoom: 1;/*在ＩＥ下觸發(fā)其layout，也要以使用_height:1%來代替zoom*/}

?

使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以。

對于overflow屬性清滁浮動我們還可以這樣應(yīng)用：

?

   .A {overflow: auto;/*除ＩＥ6以及其以下版本不識別之外，其他瀏覽器都識別*/}* html .A {height: 1%; /* IE5-6 */}

?

3.clearfix方法

這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動，是利用:after和:before來在元素內(nèi)部插入兩個元素塊，從而達到清除浮動的效果。其實現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個div.clear標簽，而clearfix利用其偽類clear:fix在元素內(nèi)部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：

HTML Code:

?

   <div class="demo A clearfix"><div class="demoB demoFloat">float left</div><div class="demoC demoFloat">float right</div><div class="demoD demoFloat">not float</div></div>

?

使用clearfx來清除浮動最主要掌握一點，需要在有浮動元素的父元素中加入一個叫clearfix的class名稱，比如說我們這個例子，我們需要在div.A中加入一個clearfix的class名。接著在給這個clearfix加上樣式

?

  .clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;} /* IE < 8 */

?

其實只使用clearfix:after就可以達到清除浮動的效果，但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，所以為了讓瀏覽器兼容這個clearfix的清除浮動，在原來的基礎(chǔ)上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題。

在這么多種清除浮動的方法中，都沒有離開最原始的clear:both方法，特別是clearfix:after清除浮動，完全就是clear:both的一種變身，區(qū)別在于不需要在html增加一個標簽，而只需要在有浮動元素的父元素中加上一個clearfix的class名，這樣就輕松解決了清除浮動的問題。

轉(zhuǎn)載于:https://www.cnblogs.com/pangblog/p/3290069.html

總結(jié)

以上是生活随笔為你收集整理的CSS——float属性备忘笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。