前一段時(shí)間我在做Green Gaint這個(gè)主題的時(shí)候，發(fā)現(xiàn)了一個(gè)在布局中出現(xiàn)的關(guān)于浮動(dòng)的問(wèn)題。讓我來(lái)說(shuō)明一下，如下圖所示：
我們假設(shè)有一個(gè)容器A，在這個(gè)容器內(nèi)有兩個(gè)容器B和C，B設(shè)置了高度和寬度，并且向左浮動(dòng)，C沒(méi)有浮動(dòng)，它將圍繞在B區(qū)域的周圍，這是典型的浮動(dòng)效果，沒(méi)有問(wèn)題。
但是當(dāng)C容器設(shè)置了寬度之后，并且B和C的寬度之和小于A容器之后的效果，在Firefox和IE8中是這樣的：
在IE6和IE7中的表現(xiàn)是這樣的：
在這里，讓我們將B區(qū)域看作是網(wǎng)頁(yè)中的主要內(nèi)容區(qū)，C區(qū)域看作是側(cè)邊欄，要達(dá)到B在左，C在右，B和C之間還要保留一定的空間的話，我們還要給C設(shè)置margin-left屬性，當(dāng)添加上左邊距的屬性后，IE和Firefox中的布局一致了。
當(dāng)然，你可以完全不用給C區(qū)域設(shè)置寬度，只需要添加左邊距就能達(dá)到希望的布局效果，但是有時(shí)候我們需要給C區(qū)域添加寬度值的時(shí)候，你要明白Firefox、IE8和IE6、IE7對(duì)于這種布局的表現(xiàn)是不同的。 |
