前一段時間我在做Green Gaint這個主題的時候,發(fā)現(xiàn)了一個在布局中出現(xiàn)的關(guān)于浮動的問題。讓我來說明一下,如下圖所示:

我們假設(shè)有一個容器A,在這個容器內(nèi)有兩個容器B和C,B設(shè)置了高度和寬度,并且向左浮動,C沒有浮動,它將圍繞在B區(qū)域的周圍,這是典型的浮動效果,沒有問題。
但是當C容器設(shè)置了寬度之后,并且B和C的寬度之和小于A容器之后的效果,在Firefox和IE8中是這樣的:

在IE6和IE7中的表現(xiàn)是這樣的:

在這里,讓我們將B區(qū)域看作是網(wǎng)頁中的主要內(nèi)容區(qū),C區(qū)域看作是側(cè)邊欄,要達到B在左,C在右,B和C之間還要保留一定的空間的話,我們還要給C設(shè)置margin-left屬性,當添加上左邊距的屬性后,IE和Firefox中的布局一致了。
當然,你可以完全不用給C區(qū)域設(shè)置寬度,只需要添加左邊距就能達到希望的布局效果,但是有時候我們需要給C區(qū)域添加寬度值的時候,你要明白Firefox、IE8和IE6、IE7對于這種布局的表現(xiàn)是不同的。 |