大家好
最近處理一個 CSS 跑版問題很疑惑
就是如果 float 配上 overflow 時，不同瀏覽器行為會不一樣
例如這份程式
http://goo.gl/MsztHN
在 chrome 顯示是
http://i.imgur.com/rplLNL3.png
在 firefox 顯示是
http://i.imgur.com/5zBF3T5.png
明顯不一樣..
overflow 不是只是設定有沒有 scroll bar 嗎?
如果只是設定 scroll bar
應該會出現下面這種結果
http://i.imgur.com/CFGsly3.png
可是 chrome 與 fixfox 都不是這種結果
怎麼會有其他的行為出現?
是有甚麼是我沒注意到的? 還是這種寫法不符合正統作法?
另外一個問題
我發現如果我有設定 display: none ，那麼同一個元素設定的 clear 屬性就會無效...
是 display: none 會讓其他屬性無效嗎?

有時候css並不是總是可以很有邏輯的解釋,有時單純就只是經驗還有trick,像position:absolute;top:0;bottom:0既然render出來不一樣,就用其他種方式去寫

i大你的例子在邏輯上就是矛盾的，我的overflow在邏輯上是矛盾的嗎? 我想可能有，但我看不出來。

Overflow 會產生新的 block formatting contexthttp://goo.gl/XtCR3z大概兩個瀏覽器的新 bfc 跟 float 元素互動的方式不同...另，box2掛clear:left以後就相同了。但應該不是你要的...

overflow不是只有關於卷軸，他會修改box Mode...

BFC沒聽過,學習了,我剛那寫法是讓一個元素高度撐開跟母元素一樣,有時有些特別組合height=100%沒作用,那寫法卻有作用,行為也有點不一樣,不好解釋的都叫trick xd

感謝G大，以前不知道BFC這東西。另外我的CSS知識是從 http://goo.gl/dKJjk1 來的對於 CSS 那網站會說明得太少嗎? 例如 BFC 就沒有提

你要找細節就去找高手的blog或是大社群維護的像css-tricks或是mdn那種,工具只是達到目的的方式