Html 浮动文本无需扩展容器div宽度

我试图理解以下布局情况：我得到了一个宽度未定义的浮动div，用作容器。在里面我得到了一个左浮动标题。“有一个未浮动的div”包装了另一个左浮动的div。未浮动的div用于隐藏具有小视口的内容，但这对观察不重要

您可以在此处看到布局结构：

标题
lorem ipsum dolor sit amet。
lorem ipsum dolor sit amet。lorem ipsum dolor sit amet。
lorem ipsum dolor sit amet。

在这个提琴中，当我将文本添加到unfloated div中时，整个容器将扩展其宽度。请参见此处：

标题
正文
lorem ipsum dolor sit amet。
lorem ipsum dolor sit amet。lorem ipsum dolor sit amet。
lorem ipsum dolor sit amet。

为什么呢？看起来浏览器在一行中测量整个宽度，然后将浮动div与下面一行中的3个元素放在一起？这是另一个我不理解的问题，但这里已经讨论过了：

当文本已经有足够的空间浮动到标题旁边时，为什么包含的div变得更宽

edit1：在ie中，这似乎可以在不将浮动包装到另一行的情况下工作。这是chrome/ff中的浏览器问题吗

edit2：我认为所有的问题都可以通过不建立一组一致的块格式上下文来总结。浮动div中的未浮动div和浮动子项似乎是“未定义”的，并且浏览器对这种情况的解释不同。解决方案是建立一致的BFC

谢谢你的帮助

---

Patrick

似乎您可能对浮动的具体工作方式，以及相邻浮动和未浮动的内容在其周围的行为没有确切的感觉（别担心，这可能很难把握，而且需要时间）

如果我对这个问题的理解是正确的，您希望为带有绿色边框的

div

建立一个正确的，这可以通过添加

溢出：auto

（以及其他方法）来建立

块格式上下文是块的可视化CSS呈现的一部分 网页。它是块框布局发生的区域 浮点数之间相互作用

当内容显示为折叠时，通常可以看到在使用浮动时可能需要建立块格式上下文。您可以在原来的小提琴中看到这一点，因为带有绿色边框的

div

没有延伸到其浮动内容的边界周围。添加

overflow:auto

将恢复预期的行为

---

我知道这一点。您也可以通过浮动绿色边框div来修复它。但是我想了解为什么框会在概述的场景中扩展。在我看来，紫色元素应该浮动在标题旁边，因为它们包含在另一个浮动中。然后文本应该浮动在紫色元素旁边。这是我在IE中得到的结果。似乎更符合逻辑。@脱机-请参阅答案中的小提琴，这显示了您所陈述的行为，标题>紫色元素>文本。这是因为您将标题内容浮动到包含紫色项和文本项的div的左侧，紫色项浮动到此的左侧…因此，文本项显示在右侧。如果没有BFC，浮动安排无法正确建立。这是否意味着在浮动div旁边有一个未浮动div，并且该未浮动div具有浮动元素，通常是一个坏主意？我很困惑，因为我似乎处理得很好。顺便说一下：在chrome中，这是这样呈现的：。在我看来，容器元素的BFC应该足够了。如果未浮动的div有浮动元素，则chrome似乎无法正确测量。

    <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>

    <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>