CSS基礎(chǔ)知識(shí)——浮動(dòng)的問(wèn)題

浮動(dòng)因脆弱而飽受詬病。大多數(shù)的脆弱性來(lái)自于 IE6 及其一系列的浮動(dòng)相關(guān) bug。因?yàn)樵絹?lái)越多的設(shè)計(jì)師不再支持 IE6 了，你也可以不關(guān)注它了。不過(guò)對(duì)于那些要關(guān)注的人來(lái)說(shuō)，這里有些大概。

? 推倒是浮動(dòng)元素內(nèi)的元素（大多是圖片）比浮動(dòng)元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會(huì)在浮動(dòng)之外渲染圖片，但是不會(huì)有伸出來(lái)的部分影響其他布局。IE 會(huì)擴(kuò)展浮動(dòng)來(lái)包含圖片，精彩大幅度地影響布局。一個(gè)普遍的例子是突破伸出主內(nèi)容之外把側(cè)欄推到下面。  

? 快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來(lái)切除多余的部分。 

? 雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距?？焖傩拚航o浮動(dòng)設(shè)置 display:inline; 而且不用擔(dān)心，它依然是塊級(jí)元素。 

? 3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周?chē)幸粋€(gè)奇怪的力場(chǎng)一樣。快速修正：在受影響的文本上設(shè)置寬度或高度。 

? IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉?？焖傩拚河酶冈氐牡變?nèi)補(bǔ)白(padding)代替。