CSS基礎(chǔ)知識——浮動的問題

浮動因脆弱而飽受詬病。大多數(shù)的脆弱性來自于 IE6 及其一系列的浮動相關(guān) bug。因為越來越多的設(shè)計師不再支持 IE6 了，你也可以不關(guān)注它了。不過對于那些要關(guān)注的人來說，這里有些大概。

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

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

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

? 3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場一樣?？焖傩拚涸谑苡绊懙奈谋旧显O(shè)置寬度或高度。 

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