Question

子元素不会拉伸父容器。

我的代码：

HTML：

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

的CSS：

.window{
    width: 500px;
    height: 100px;
    overflow: auto;
    background: gray;
}

.wrapper{
    background: pink;
    border: 1px solid red;
}

.long{
    width: 700px;
    background: beige;
}

example

我希望.long拉伸他的父.wrapper。 .wrapper宽度必须与.long（700px）相同。

我可以通过将float: left设置为.wrapper来实现此目的。

但是这里发生的事情我不明白，为什么它有帮助？这种行为的机制是什么？我需要解释，链接到w3c文档。

我还可以做些什么来扩展.wrapper宽度？

Answer 1

默认情况下，.wrapper div继承您在.window上设置的固定宽度。您可以浮动.wrapper并将其宽度设置为auto，以便宽度不受限制地扩展到父级。

<强> CSS：

.wrapper {
    float: left;
    width: auto;
}

示例：http://jsfiddle.net/WTGAc/3/

理论：

默认情况下，wrapper的尺寸会隐藏在其父级.window上的尺寸上。

浮动元素仍然存在于其定义的参数范围内父元素，即可用宽度和水平位置。他们仍然与该父元素内的文本和其他元素交互（或其他以下要素）。在这方面，他们是相当的不同于绝对定位的元素，从中删除文档流程并且不与其他元素交互......但是甚至然后，如果他们有一个定位的祖先，那么他们受到限制该祖先的信封，并将其作为基础计算尺寸和尺寸（虽然他们仍然可以做到延伸或存在于祖先的外面。

Source of Quote

由于元素浮动并设置在普通文档流之外，现在它可以扩展到父级的真实宽度，而不是最初定义的固定宽度。

Answer 2

宽度和CSS可视化格式模型

在您的示例中，您有以下内容：

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

在最简单的情况下，.window是具有固定宽度（500px）的包含块。子元素.wrapper从.window继承宽度。 .long元素的宽度为700px，它将触发溢出条件。由于.window已声明overflow: auto，因此.window元素将生成水平滚动条。请注意，通过使用overflow: auto，.window会建立新的块格式设置上下文，这就是水平滚动条显示在.window上而不是视口/根元素的原因。

当您向左浮动.wrapper时，.wrapper元素定义了一个额外的块格式化上下文。新的块格式化上下文将忽略从其包含块继承的宽度，并计算足以包含内容的新宽度（缩小到适合），这就是.wrapper的粉红色背景现在扩展整个700px的原因宽度。

您可以通过将position: relative添加到.window和position: absolute添加到.wrapper来触发相同的效果。但是，这是有效的，因为您将高度设置为.window，否则，.window高度将计算为零，因为绝对元素不在流中且（与浮点数不同）将不再影响{{ 1}}内容布局（在这种情况下不对高度有贡献）。

除此之外，您还可以尝试.window而不是在float: left上使用.wrapper，这也将建立新的块格式化上下文，但这次滚动条显示在{{ 1}}而不是overflow: auto。

w3.org的相关文档是：

10视觉格式化模型细节
  10.3计算宽度和边距
  10.3.5浮动的，未替换的元素

链接：http://www.w3.org/TR/CSS2/visudet.html#float-width

子元素不伸展父容器

2 个答案:

宽度和CSS可视化格式模型