CSS 小記 : 避免使用多個 float

在寫 css 時要處理兩、三種瀏覽器的相容問題實在很繁瑣。由其是 在大家對屬性的解釋都不太一樣的時候特別麻煩。這裡有一個小心得： 避免使用多個 float

如果你希望做出多個 box 排在一起時，一般說來有兩種作法：

(1) 兩個 box 都是 float: left (2) 兩個 box 都是 position: absolute ，但一左一右

對於 (1) 的做法，右邊的那個 box 如果內容物太寬，超過了指定的 寬度時 mozilla 會將頂層的 box 寬度延伸，可能會導致出現左右 捲軸。而 IE 則是會認為這個過寬的 box 放不下，而捲到下一行去。

所以對於 (2) 的作法可能會比較合適，不過這其實還是沒有解決內 容物過寬的問題，如果過寬的話，預期的結果是左右兩個 Box 會在 畫面中間重疊在一起。

因此另一個問題便是如何去嚴格限制內容物的寬度。