使用 float:left 属性并排浮动两个 div 是否需要宽度

Question

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

当我构建了各种项目时，我遇到了这样的情况：浮动在没有设置宽度的情况下不起作用，但在其他情况下，似乎不需要宽度，并且浮点本身会限制元素宽度。

例如，下面的小提琴显示两个元素仅使用 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不允许它们并排浮动，除非为两者设置了宽度。

我是否失去理智，或者是否有某些情况导致此行为有所不同？

Answer 1

当对元素设置float:left或float:right时，它会强制创建新的块格式上下文，并且它的行为类似于内联块级别，宽度和高度是动态的（由内容决定）。

Answer 2

。一个块元素，它将占据它可用的整个宽度 它。

正常流程中未替换的块元素将占用其可用的整个宽度。此要求在第 http://www.w3.org/TR/CSS2/visudet.html#blockwidth

浮动元素不在正常流中，因此该规则不适用。相反，浮点宽度是根据它们自己的规则确定的，在 http://www.w3.org/TR/CSS2/visudet.html#float-width 中陈述和描述。这表示，当浮点元素的计算宽度为"auto"时，其使用的宽度是使用收缩拟合算法确定的。

请注意，收缩拟合算法也用于其他类型的布局，包括未替换的内联块元素和表格单元格，但在其他方面（如垂直对齐），这些元素的布局行为与浮点数的布局行为完全不同。