html - float 文本无需扩展容器 div 宽度

Question

我试图理解以下布局情况:我有一个 float 的 div，其宽度未定义，用作容器。在里面我有一个左浮动标题。有一个未 float 的 div 包裹着另一个左浮动的 div。未 float 的 div 用于隐藏具有小视口(viewport)的内容，但这对观察无关紧要。

你可以在这里看到布局结构:jsfiddle before

    <div class="container" style="float: left">
    <div style="float: left">HEADER</div>
    <div style="border: 1px solid green;">
        <div style="float: left">
            <div class="element">lorem ipsum dolor sit amet.  </div>
            <div class="element">lorem ipsum dolor sit amet.  lorem ipsum dolor sit amet.</div>
            <div class="element">lorem ipsum dolor sit amet.  </div>
        </div>
    </div>
</div>

在这个 fiddle 中，当我将文本添加到未 float 的 div 中时，整个容器扩展了它的宽度。看这里:jsfiddle with text .

    <div class="container" style="float: left">
    <div style="float: left">HEADER</div>
    <div style="border: 1px solid green;">TEXT
        <div style="float: left">
            <div class="element">lorem ipsum dolor sit amet.  </div>
            <div class="element">lorem ipsum dolor sit amet.  lorem ipsum dolor sit amet.</div>
            <div class="element">lorem ipsum dolor sit amet.  </div>
        </div>
    </div>
</div>

这是为什么呢？浏览器似乎在一行中测量整个宽度，然后将 float 的 div 与下面一行的 3 个元素放在一起？这是另一个我不明白的问题，但这已经在这里讨论过:Right floated container results in line break .

为什么当标题旁边已经有足够的空间让文本 float 时包含的 div 变得更宽？

edit1:似乎在 ie 中无需将 float 包装到另一行就可以工作。这是 chrome/ff 中的浏览器问题吗？

edit2:我认为所有的问题都可以通过没有建立一套一致的 block 格式化上下文来概括。带有 float 子项的 float div 中的未 float div 似乎是“未定义的”，并且浏览器对这种情况的解释不同。解决方案是建立一致的 BFC。

感谢您的帮助 帕特里克

Answer 1

您似乎对 float 的确切工作原理以及相邻的 float 内容和非 float 内容如何在它们周围起作用没有确切的了解(别担心，这可能很难掌握并且需要时间)。

如果我对这个问题的理解是正确的，你想建立一个正确的 block formatting context 对于带有绿色边框的 div，这可以通过添加 overflow:auto(以及其他方法)来建立

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

当内容显示为折叠时，您通常可以看到在使用 float 时何时可能需要建立 block 格式化上下文。您可以在原始 fiddle 中看到这一点，因为带有绿色边框的 div 不会围绕其 float 内容的边界延伸。添加 overflow:auto 可恢复预期行为。

Demo Fiddle