1

我知道溢出：隐藏是一种清除浮动的方法，但我不明白为什么。我想如果我们确实使用了溢出：隐藏是因为元素之外的东西受到了浮动的影响？如果是这样，隐藏了什么？

例如，在这种情况下，#second 中是否有任何隐藏的内容使其位于 #first 旁边？

（还有另一个相关的问题，但这是不同的，这是更具体的。我的问题是：“溢出：隐藏”是否隐藏了什么？它是什么？）

这是示例：http: //jsfiddle.net/NSCpD/

CSS：

#first{
    float:left;
    width:100px; height:100px;
    background:blue;
}

#second{
    width:300px; height:300px;
    overflow:hidden; /* això fa que no li afecti el float */
    background:red;
}

HTML：

<div id="first"> </div>
<div id="second"> </div>
4

2 回答 2

2

具有非overflow值的元素visible建立一个新的块格式化上下文。您提供的小提琴与流入块级元素包含浮点数时有点不同。即使流入块级元素是流出流的同级元素，float它仍然会在创建新的 BFC 时承认它的存在，就好像它是一个行框一样。该规范在这两个摘录中描述了这一点：

浮动、绝对定位的元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（除非该值已被传播到视口）为其内容建立新的块格式化上下文。

在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式化，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会由于浮动而变窄）。

于 2013-08-15T15:18:59.333 回答
1

顾名思义，overflow:hidden隐藏任何溢出元素的内容（即超出给定尺寸）。在这个例子中实际上没有溢出，所以没有隐藏任何东西。overflow但是设置other than visible（以及display: inline-block，本身等）的副作用float是块行为的变化。虽然普通块实际上根本不考虑浮动（只有它的文本内容），但建立新块格式化上下文的块（请参阅 Adrift 的答案）将其所有内容隔离在内部，包括嵌套浮动、可能可折叠的边距等.

这个副作用可以用来防止浮动容器崩溃，但它与清除浮动没有任何关系。在可折叠边距、文档中较早的其他浮动等情况下，清算和 BFC 的行为非常不同。

于 2013-08-16T10:02:35.430 回答