什麼溢出：隱藏是否爲ul標籤？

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

簡而言之，它說一起做這個東西線：

HTML：

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div>

CSS：

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
}

它的工作原理非常奇妙，但我在溢出時非常沮喪：隱藏的CSS聲明。

沒有它，我的外層div倒塌像這樣：

http://jsfiddle.net/alininja/KQ9Nm/1/

當它包括在內，外格正好表現，我怎麼會希望它是：

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道爲什麼溢出：隱藏是觸發這種行爲。我期望它能夠切斷內部物品，而不是迫使外部的div擴展到必要的高度。

謝謝你看！

來源

2012-10-19 A L

非常有趣。實際上，如果你將'overflow：hidden'更改爲'overflow：auto'，它仍然有效。希望我能解釋爲什麼，但它是一個非常有趣的發現。謝謝。 –

也許這篇文章可以說明一點：http://colinaarts.com/articles/the-magic-of-overflow-hidden/ –

如果你指定了高度，它會切斷內部物品。這不是'overflow：hidden'的行爲，因爲它是'float：left/right'的行爲。 – Shmiddty

除非將溢出設置爲隱藏，滾動或自動，否則任何可能浮動的內容都不會被剪切。該方法的真正魔力在於，如果未給元素設置高度，當將溢出設置爲隱藏時，它會佔用內部元素的高度。

這裏div不會環繞img，因爲img是浮動的。

<div><img style="float:left;height:100px" /></div>

這裏的div將實現img的高度，現在它已經有一個適當的溢出。

<div style="overflow:hidden"><img style="float:left;height:100px" /></div>

如果你給它一個設定的高度，然後設置溢出隱藏它會砍什麼，否則將向外溢出。

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>

注意，在很多情況下，這些技術可以用來避免clear:both類型額外的標記。

來源

2012-10-19 22:36:27 TheZ

overflow: hidden;是否包含漂浮的li s。 overflow: hidden;創建一個新的塊格式化上下文 - 這就是具有自己的塊格式上下文的元素 - 它們包含浮動元素。

我這裏要在計算器上另一種答案，說明這一點有點多：Adding CSS border changes positioning in HTML5 webpage

來源

2012-10-19 22:38:10 banzomaikaka

我希望我可以接受多個答案。謝謝！ –

用溢出：隱藏，內容不開車/推UL的尺寸。 UL尺寸覆蓋並忽略內容是否適合其內容。

沒有溢出：隱藏內容及其行爲可能會或可能不會推動UL的整體尺寸。這主要是因爲UL更多的是一個容器，其邊界由其內容設置/影響。在隱藏溢出的情況下，UL更像一個視圖 - 端口而不是一個容器，而是具有壓倒一切的尺寸。

來源

2012-10-19 22:38:30

什麼溢出：隱藏是否爲ul標籤？

回答

相關問題