? 原文：http://css-tricks.com/all-about-floats/? 這篇文章說(shuō)的簡(jiǎn)單易懂

?

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

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

? float的姐妹屬性：clear

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

?

? 如：

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

#footer {clear: both;            
}

?

?

? float引起的父元素的折疊問(wèn)題：

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

?

?

?? 我們可以通過(guò)清除浮動(dòng)來(lái)解決這個(gè)問(wèn)題。

?

?? 如何清除浮動(dòng)？

?

? 1）使用空div

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

?

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

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

?

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

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

?

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

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

??????

????? ?一個(gè)常見(jiàn)的問(wèn)題如下：

???????

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

??

???2)Double Margin Bug

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

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

???????

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

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

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

?

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

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

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

?

? 更加深入地處理float問(wèn)題：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的一切的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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