爲什麼溢出屬性影響元素大小和流量？

我偶然發現了一些讓我感到困惑的CSS行爲。比方說，有兩個塊元素，他們的第一個浮動的權利（jsfiddle）： enter image description here 爲什麼溢出屬性影響元素大小和流量？

如果overflow屬性設置爲隱藏在非浮動的元素，該元素是爲了以適應縮水浮動元素寬度jsfiddle： enter image description here

我其實沒有問題，但我想知道爲什麼發生這種情況。我遇到的問題是以下情況，其中溢出設置爲隱藏後，非浮動元素的width設置爲100%。我在IE9，火狐14，歌劇12，瀏覽器20和Safari 5 Win7上進行了測試，所有的人，除了火狐秀（jsfiddle）： enter image description here

我希望和預期是什麼，什麼Firefox的顯示，是與上面的第一張圖片相同。那麼，誰能闡明爲什麼會發生這種情況？

來源

2012-07-22 alh84001

相關（甚至重複）：http://stackoverflow.com/questions/6128139/can-overflowhidden-affect-佈局/ 6128264＃6128264 – kapa 2012-07-22 12:09:25

根據定義「如果容器元素本身包含其他東西，浮動的div將坐在容器的右邊緣。」

案例1：.container覆蓋了可用的總空間。 .content除了.float（這裏的.content不是形狀矩形）以外的所有空間，這就是浮動。它實際上溢出來覆蓋空間。它的默認行爲。

案例2：現在您告訴.content來隱藏溢出。因此它隱藏了之前作爲默認行爲所做的溢出。案例3：您告訴.content採用父級的全部寬度，即.container，因此它會忽略溢出：隱藏並僅擴展以填充空間。

如果你想知道溢出的怪異的行爲：隱藏，檢查這個ARTICLE

來源

2012-07-22 12:20:02

這篇文章真的幫了我。要注意的是，在情況1中，'.content'實際上並沒有溢出。你可以親眼看到它的寬度比2）更大。這實際上是與浮游物正常行爲。 – alh84001 2012-07-22 12:57:14

爲什麼溢出屬性影響元素大小和流量？

回答

相關問題