Internet Explorer中Float DIV和Clear DIV之間奇怪間隙的Bug

 Container: padding: 20px;Float Float Clear

在浮動的DIV下面放一個有clear屬性的DIV是我們做布局的時候常常用的一種方式。如果這個浮動的DIV和有clear屬性的DIV是放在一個作為容器的DIV裡面，而這個最外層的DIV由具有padding的時候，在IE瀏覽器裡面，浮動的DIV和有clear屬性的DIV之間會有一個奇怪的間隙。

如果你分別在IE和Firefox中查看右邊的樣本，你就會看到，在Firfox 中跟我我們預期的表現是一樣的，只有外層容器和DIV之間有padding；而在IE中，回有一個20px間隙在浮動的DIV和有clear屬性的DIV之間。

只是示範用到的代碼：

<div style="padding: 20px;">

Container: padding: 20px; 

<div style="float:left; width: 50%; background: green; color: white;">

Float 

</div><div style="float:right; width: 50%; background: blue; color: white;">

Float 

</div>

解決這個問題的方法就是放棄使用最外層DIV容器的頂部和底部padding，該由內部DIV的頂部和底部margin來時實現。這樣最終的效果在IE和Firefox中就是一樣的。