Question

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

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

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

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>

Answer 1

overflow值不是visible的元素会建立新的Block Formatting Context。您提供的小提琴与流入块级元素包含浮点数有点不同。即使流入块级别元素是流出float的兄弟，它仍然会在创建新BFC时确认它的存在就好像它是一个行框。 spec在这两个摘录中描述了这一点：

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

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。 即使存在浮动也是如此（尽管盒子的线框可能会因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下盒子本身可能变得更窄）到花车）。

Answer 2

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

此副作用可用于防止浮子容器坍塌，但它与清除浮动没有任何关系。在可折叠边距，文档早期的其他浮动等情况下，清算和BFC的行为方式完全不同。

溢出：隐藏在浮动中。它隐藏了什么吗？

2 个答案: