首頁>Program>source

html:為什麼隱藏的溢位会阻止浮動元素逃离其容器？

我在網頁上遇到的一个常见問题是浮動div爬到了其容器之外。

#wrapper{
    border:1px solid red;
}
#wrapper div{
    float:left;
    font-size: 3em;
}
...
<div id="wrapper">
    <div>Hello World</div>
</div>

實時示例：http://jsfiddle.net/ugUVa/1/

有很多方法可以解決此問题（將div插入clear：both）

我看到的一个更整潔的解決方案是將包裝器divs溢位樣式設置為隱藏：

示例：http://jsfiddle.net/ugUVa/2/

這在所有瀏覽器上都能很好地工作，並且干净利落，没有其他標記.我很高兴，但我不知道為什麼会起作用！

我看過的所有文件都表明存在溢位：隱藏是為了隱藏內容，而不是調整父級的大小以適合其子級...

有人可以對此行為提供解釋吗？

谢谢

184

html

css

最新回復
  • 3月前
    1 #

    它將建立一个塊格式化上下文。

    Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

    另請參见：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

  • 3月前
    2 #

    這是正確的， 樣式旨在控製內容溢位的後果。

    對浮動元素的影响是 overflow的副作用 樣式建立元素的塊格式設置上下文。

    当您不為包含元素指定大小時，塊格式化上下文会从其包含的元素中获取其大小，即包含元素所获取的大小。

    overflow

相似問題

  • ▲ winforms:如何在C#中向UserControl添加事件？
  • ▼ android:所有螢幕設備的圖像尺寸