为什么溢出隐藏停止浮动元素逃脱他们的容器？ [英] Why does overflow hidden stop floating elements escaping their container?

问题描述

我在网页上遇到的常见问题是浮动div在其容器之外爬行。

A common problem that I have with web pages is floating divs creeping outside of their containers.

#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 ）

There are a lot of dirty ways to fix this (inserting a div with clear:both)

我看到的一个更整洁的解决方案是将包装器divs溢出风格设置为隐藏：

A much neater solution I have seen is setting the wrapper divs overflow style to hidden:

http://jsfiddle.net/ugUVa/2/

这在各个浏览器工作得很好，漂亮和干净，没有额外的标记。我很高兴，但我不知道为什么它的工作原理！

This works well across browsers, nice and cleanly with no additional markup. I am happy, but I have no idea WHY it works!

我看过的所有文档表示overflow：hidden是隐藏内容，不调整父

All the documentation I have looked at indicates overflow:hidden is for hiding content, not resizing a parent to fit its children...

b $ b

推荐答案

它创建一个块格式化上下文< a>。

It creates a block formatting context.

阻止格式化上下文对于定位（参见float）和清除定位
和清除浮动的规则仅适用于同一块
格式化上下文中的事物。浮动不影响其他
块格式化上下文中的事物的布局，并且清除仅清除
同一块格式化上下文中的过去浮动。

请参阅： http：//www.w3 .org / TR / CSS2 / visuren.html＃block-formatting

这篇关于为什么溢出隐藏停止浮动元素逃脱他们的容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！