溢出：隱藏在CSS

任何人都可以解釋我overflow:hidden實際上做了什麼？我無法理解這個概念，儘管閱讀了許多CSS教程。我右邊和左邊有兩個漂浮物，爲什麼我要將overflow:hidden應用到我的標題？溢出：隱藏在CSS

我對這個屬性感到困惑。

2013-10-20 John Cooper

因爲瀏覽器的陌生感，容器元素的高度將不會是正確的，並不會達到，直到最後一個浮動元素的結尾，所以爲了「欺騙」的容器元素爲了封裝所有浮動的孩子，它需要有'overflow：hidden' – vsync

@vsync：這不是「瀏覽器的奇怪」。這完全是故意的行爲。 – BoltClock

與我的8年CSS經驗，我覺得很奇怪，而且不合邏輯的行爲。 – vsync

在容器上overflow: hidden只是隱藏流過的框外，如下面的圖精美證明的任何內容（克里斯Coyier禮貌/ CSS-技巧）：

你可能在使用overflow: hidden作爲一種clearfix在這種情況下，這只是一種方法來獲取父容器擴展到其浮動子的高度（因爲浮動元素被取出正常頁面流）。使用overflow: hidden和overflow: visible在有浮動兒童的容器上的區別可以在following demo中看到。

來源

2013-10-20 09:36:23

如果元素的內容大於容器，它通常會更改容器的大小。 overflow：hidden只是告訴它隱藏任何不適合容器的內容，所以容器保持相同的大小。

來源

2013-10-20 09:35:00

有overflow可以有5值。它們是visible，hidden,scroll,auto和inherit。通過使用overflow:hidden，您無需使用滾動條即可強制內容適合指定的尺寸。因此，只有符合尺寸的內容纔會顯示，其餘部分隱藏。

也許這個演示將幫助您直觀地看到其中的差別：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

來源： http://www.w3schools.com/cssref/pr_pos_overflow.asp

來源

2013-10-20 09:38:47 IceArdor

overflow: hidden從來沒有打算直接影響到彩車 - 如通過這裏的其他答案它的主要目的是控制內容溢出，換句話說就是按照罐子上的說法 - 但它造成容器產生自己的block formatting context的副作用不明確。發生這種情況時，the container must expand to contain its floats，即使浮標通常被取出正常流量。這通常在CSS教程中沒有提及，因爲它不完全是overflow屬性的預期用途。

請注意，這與清除浮動數據不同，因爲您正在修改容器本身並且沒有引入一些清除元素（就像clearfix一樣）。

參見：Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

來源

2013-10-20 09:41:00 BoltClock

溢出：隱藏在CSS

回答

相關問題