CSS溢出屬性

Question

我發現了一些CSS模板，其中一些類具有溢出：隱藏屬性，但沒有定義大小。如果我沒有記錯，除非另有說明，否則塊元素會伸展以適合其內容。由於情況並非如此，我覺得把溢出：隱藏是毫無意義的，我可以毫不猶豫地刪除它。這是對的還是我錯過了什麼？

Answer 1

雖然這是overflow屬性的主要目的，但它不是它對渲染的唯一影響。它具有的另一個主要作用是將overflow設置爲除visible以外的任何值（默認值）都會導致塊框自行建立block formatting context。

這主要用於包含浮動而不需要clearfix;然而，這不是帶來新的BFC的唯一影響;還有一些其他的角落案例在規範的其他地方有更好的描述。另請參閱this lengthy write-up關於此行爲的推理（奇怪的是，它與包含浮點數很少有關;實際上最終只不過是一種副作用）。

所以，如果你刪除了overflow聲明，你可能會破壞浮動佈局等等。我建議避免這樣做，除非它是絕對必要的，或者你確定它不會影響佈局。

Answer 2

它可能取決於。如果您的div包含一些浮動元素，您可以使用

div { 
    height: auto; 
    overflow : hidden; 
} 

作爲清算的解決方法。所以我不會刪除該規則，而不在佈局上看到效果

Answer 3

如果該div內有浮動子項，那麼overflow: hidden可能包含它們。

overflow: hidden創建一個新的塊格式上下文，創建新的塊格式上下文的元素包含浮點數。

Answer 4

overflow:hidden可以派上用場，如果您有一個指定寬度大於容器的最大允許寬度的子元素。否則它會拉伸容器。

See example

一個常見用途是顯示carousel時，與液浮子元素。元素需要內聯顯示，但隱藏起來，以便在更改left CSS屬性時可以進入視覺。