我在網頁上遇到的一个常见問题是浮動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/
這在所有瀏覽器上都能很好地工作,並且干净利落,没有其他標記.我很高兴,但我不知道為什麼会起作用!
我看過的所有文件都表明存在溢位:隱藏是為了隱藏內容,而不是調整父級的大小以適合其子級...
有人可以對此行為提供解釋吗?
谢谢
最新回復
- 1月前1 #
- 1月前2 #
這是正確的, 樣式旨在控製內容溢位的後果。
對浮動元素的影响是
overflow
的副作用 樣式建立元素的塊格式設置上下文。当您不為包含元素指定大小時,塊格式化上下文会从其包含的元素中获取其大小,即包含元素所获取的大小。
overflow
相似問題
- html:CSS屬性作為SASS mixin值htmlcsspropertiessassmixins2021-01-10 13:30
- css:两个div,一个固定宽度,另一个固定宽度csshtml2021-01-09 12:54
- html:如何在CSS中使圖像覆盖?htmlcssimagehoveropacity2021-01-09 14:54
- html:从FF的選擇框中删除轮廓htmlcssfirefoxxhtml2021-01-09 15:59
- jquery:如何建立切換按钮?jqueryhtmlcss2021-01-09 17:26
它將建立一个塊格式化上下文。
另請參见:http://www.w3.org/TR/CSS2/visuren.html#block-formatting