Question

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

由于我已经构建了各种项目，我遇到了浮动在没有设置宽度的情况下无法工作的情况，但在其他情况下，似乎不需要宽度，并且浮动本身将限制元素宽度。

例如，以下fiddle显示仅使用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并不允许它们并排浮动，除非宽度是两者的集合。 / p>

我是否会失去理智，或者是否存在某些因此行为而异的情况？

Answer 1

在元素上设置float:left或float:right时，会强制创建新的block formatting context，其行为与内联块级别相似，宽度和高度是动态的（已确定）通过内容）。

Answer 2

...一个块元素，它将占用它可用的全部宽度它

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

中说明

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

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

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

2 个答案: