Question

我尝试了下一个代码：

＆＃13;

div.a {
  position: relative;
  width: auto;
  height: auto;
  border: 3px solid #73AD21;
}

div.b {
  float: right;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

＆＃13;

<div class="a">The outer box;
  <div class="b">The inner box</div>
</div>

＆＃13;

但出于某种原因，当我使用float而不是另一种定位方式时，外盒变得高度较小，内盒流出外盒。当我问我的朋友时，他告诉我将属性overflow: hidden;添加到外框。

它起作用了，外盒足以包含内盒。

当我了解这个属性时，我了解到这个的用途，就是显示\消失等滚动条。

Somebosy可以向我解释overflow我不明白的另一件事吗？

Answer 1

引自Block formatting contexts

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

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

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

根据上面引用的文字和我的理解，

overflow:hidden会导致一个新的float上下文，它会从浮动的子元素中清除float。因此父母自动调整。

这类似于清除父母：

#parent:after {
  content: "";
  display:table;
  clear: both;
}

手动清除父级的示例：

div.a {
  position: relative;
  width: auto;
  height: auto;
  border: 3px solid #73AD21;
}

div.b {
  float: right;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

div.a:after {
  content: "";
  display: table;
  clear: both;
}

<div class="a">The outer box;
  <div class="b">The inner box</div>
</div>

Answer 2

您正在使用浮动而不是清除。使用以下代码可以使用

第一个选项

<div class="a">The outer box;
  <div class="b">The inner box</div>
  <div class="clear"></div>
</div>
<div class="clear"></div>

div.a {
    position: relative;
    width: auto;
    height: auto;
    border: 3px solid #73AD21;
} 

div.b {
    float: right;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
.clear {
  clear:both;
}

第二个选项

<div class="a">The outer box;
  <div class="b">The inner box</div>
</div>
div.a {
    position: relative;
    width: auto;
    height: auto;
    border: 3px solid #73AD21;
} 

div.b {
    float: right;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
div.a:after,div.b:after {
     content"";
     display:block;
    clear:both;

}

为什么CSS的溢出属性会浮动？

2 个答案: