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

Question

当我第一次学习HTML时,我被告知如果要使用并排浮动2个div float:left,则必须在这两个元素上设置宽度.这是因为默认情况下,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

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

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

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

请注意，收缩到适合算法也用于其他类型的布局，包括非替换的内联块元素和表格单元格，但在其他方面，例如垂直对齐，这些元素的布局行为与是漂浮物的。