html - 使用 float :left property? 并排 float 两个 div 是否需要宽度

Question

当我第一次学习 HTML 时，有人告诉我如果你想使用 float:left 并排 float 2 个 div，你必须为这两个元素设置宽度。这是因为默认情况下，div 是一个 block 元素，它将占据它可用的整个宽度。

在我构建各种元素时，我遇到过不设置宽度 float 不起作用的情况，但在其他情况下，似乎不需要宽度， float 本身会限制元素宽度。

例如下面的fiddle仅使用 float 属性显示并排 float 的两个元素，不需要宽度。

<style>
    .left{
        background-color:yellow;
        float:left;
    }

    .right{
        background-color:green;
        float:left;
    }
</style>

<div class="left">
    Floating left
</div>
<div class="right">
    Floating left
</div>

但是，在我现在似乎无法重现的其他类似场景中，将 float 属性应用于两个 divs 不允许它们并排 float ，除非宽度设置为两者。

我是不是疯了，还是在某些情况下这种行为会有所不同？

Answer 1

当在元素上设置float:left 或float:right 时，它会强制创建一个新的block formatting context。 , 它的行为类似于内联 block 级别，宽度和高度是动态的(由内容决定)。