css float閉合問題

網頁多欄版面配置時，時常用float 對多列資料布局。

每列又包含多個元素，多欄版面配置的背景高度不能自動擴充， 例如：有個塊元素<div id=“col1” ></div>

1）： 塊元素#col1 向左浮動。

2）： 塊元素#col1 內包含多個浮動元素。

些時我們可以利用css 中的after虛擬元素來使得塊元素#col閉合。

給塊元#col素加上ClearFix 類。

                         .ClearFix:after{content:"."; visibility:hidden; height:0px; display:block; clear:both;}

                             .ClearFix{display:line-block;}

不過在Mac上的IE 要注意：

                             .ClearFix{display:block;}