css - 为什么两个 float div 之一被推到下一行？

Question

我有两个 div，我想放在一行中，第一个具有固定宽度，第二个没有设置宽度。如果我尝试将两者都设置为 float:left，如果第二个 div 包含太多单词，它将转到下一行。但如果第二个是非 float 的，它与第一个 div 保持在同一行。为什么？

.left {
    float: left;
    width: 250px;
    height: 300px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

Answer 1

如果第二个 div 是非 float 的，蓝色的 div 将保持全宽，只有文本会 float 在红色的周围。降低蓝色 div 的高度以更好地理解正在发生的事情:

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow ^ref

所以 float 元素位于蓝色 div 上方，只有文本会环绕。如果您降低高度，文本将换行到下一行:

.left {
    float: left;
    width: 250px;
    height: 30px;
    background-color: red;
}

.right {
    /*if set to float:left, it might goes the next line*/
    /*float: left;*/ 
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

---

现在，如果两个元素都是 float 的，第一个元素的宽度是固定的，但第二个元素的宽度将使用收缩以适应算法计算:

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ^ref

在您的情况下，可用宽度 是容器的宽度，首选宽度 是没有任何换行符的元素宽度，我们取两者之间的最小值。如果我们有很多文本，逻辑上它将是可用宽度

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. </div>

如果您减少内容，您将减少首选宽度，并且它将被选中，因为它将是最小值

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. </div>

要避免任何随机行为，只需固定两个元素的宽度即可:

.left {
    float: left;
    width: 250px;
    height: 200px;
    background-color: red;
}

.right {
    float: left;
    height: 300px;
    width:calc(100% - 250px);
    background-color: blue;
}

<div class="left">sidebar</div>
<div class="right">I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents. I am contents.  </div>