? 原文：http://css-tricks.com/all-about-floats/? 這篇文章說的簡單易懂

?

? float是CSS中關(guān)于定位的屬性。

? float有4個(gè)值：none, left, right, inherit (繼承父元素的float屬性值）

? float的姐妹屬性：clear

? clear有4個(gè)值：both， none， left, right (也可以說有5個(gè)：inherit，但在IE中不支持）

?

? 如：

? 設(shè)置清除浮動：

#footer {clear: both;            
}

?

?

? float引起的父元素的折疊問題：

???? 此問題在firefox出現(xiàn)。

?

?

?? 我們可以通過清除浮動來解決這個(gè)問題。

?

?? 如何清除浮動？

?

? 1）使用空div

<div style="clear: both;"></div>

?

? 2）在父元素上設(shè)置overflow屬性
???? 對父元素設(shè)置overflow：auto；或overflow：hidden；

???? 注意：overflow屬性并不是專門用來清除float的，故小心隱藏了內(nèi)容或觸發(fā)了不必要的滾動條。

?

? 3）使用偽元素選擇器：after（簡單的清除方法）

.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;
}

?

? 使用float常出現(xiàn)的問題：
??????1）疊加?

?????? 當(dāng)圖像超過層的大小之后，IE會擴(kuò)展float以容納圖像，會影響了布局。

??????

????? ?一個(gè)常見的問題如下：

???????

??????? 快速解決方法：保證你的任何圖片不會出現(xiàn)這種問題。使用overflow: hidden來裁剪超出的部分。

??

???2)Double Margin Bug

??????????? 若在IE6下在和float相同方向上使用了margin后，會使margin加倍。

???????? 快速解決方法：在float上面設(shè)置 display：inline；

???????

?????? 3）The?3px Jog（3px的偏離）

??????????? 若一段文字上面緊接著一個(gè)浮動的元素，會被踢離3px。

????????? 快速解決方法：給受影響的文本加上高或?qū)?/span>

?

??????? 4）The?Bottom Margin Bug?（影響IE7)

?????????? 若一個(gè)浮動的父元素有一個(gè)浮動的子元素，則其子元素的margin屬性的bottom值會被父元素忽略。

?????????? 快速解決方法：在父元素上使用?bottom padding?

?

? 更加深入地處理float問題：http://www.qianduan.net/new-clearfix.html

? 關(guān)于IE的hasLayout：http://baike.baidu.com/view/2945869.htm

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/qiaocheng/archive/2012/06/14/CSS.html

總結(jié)

以上是生活随笔為你收集整理的关于css中float的一切的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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