子元素不拉伸父容器

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 是具有固定宽度（500 像素）的包含块。子元素.wrapper 从.window 继承宽度。 .long 元素的宽度为 700px，它将触发溢出条件。由于.window 声明了overflow: auto，.window 元素将生成一个水平滚动条。请注意，通过使用overflow: auto，.window 建立了一个新的块格式化上下文，这就是为什么水平滚动条出现在.window 而不是视口/根元素上的原因。

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

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

顺便说一句，除了在.wrapper 上使用float: left，您还可以尝试overflow: auto，这也将建立一个新的块格式化上下文，但这次滚动条出现在.wrapper 而不是.window .

来自 w3.org 的相关文档是：

10 视觉格式化模型详细信息
10.3 计算宽度和边距
10.3.5 浮动的、不可替换的元素

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