为什么两个浮动 div 之一被推到下一行？

Question

我有两个 div 想放在一行中，第一个具有固定宽度，第二个没有设置宽度。如果我尝试将两者都设置为 float:left，第二个 div 如果包含太多单词，则会转到下一行。但如果第二个是非浮动的，它与第一个 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:left 风格..它会根据 window 宽度自动调整..你想要右 div 到下一行吗？请添加此样式。

css

.right {
 clear: both;
}

Answer 2

如果第二个 div 是非浮动的，蓝色 div 将保持全宽，只有文本会浮动在红色的周围。降低蓝色的高度 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

所以浮动元素在蓝色上方 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>

现在如果两个元素都是浮动的，第一个元素的宽度是固定的，但第二个元素的宽度将使用收缩到适合算法计算：

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>

为什么两个浮动 div 之一被推到下一行？

why is one of two floated divs are pushed to the next line?

css

css-float