Question

我要在一行中放置两个div，第一个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不浮空，则蓝色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>

float CSS属性在其容器的左侧或右侧放置一个元素，从而允许 text和inline元素环绕。 该元素已从页面的常规流程中删除，尽管仍保留为该流程的一部分^ref

因此，float元素位于蓝色div上方，只有文本会环绕arround。如果降低更多高度，文本将换行到下一行：

.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>

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

如果将“宽度”计算为“自动”，则使用的值为“缩小以适合”宽度。

缩小到适合的宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度。大致来说：通过格式化内容而不会出现断行的方式来首选宽度，而不是在出现明显的换行符的地方进行计算，并例如通过尝试所有可能的换行符来计算首选的最小宽度。 CSS 2.1并未定义确切的算法。第三，找到可用宽度：在这种情况下，这是包含块的宽度减去已使用的'margin-left'，'border-left-width'，'padding-left'值，“ padding-right”，“ border-right-width”，“ margin-right”以及任何相关滚动条的宽度。

然后缩小为适合宽度为：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>

Answer 2

因为左div具有float：left样式。它将根据窗口宽度自动调整。您是否希望右div下一行。请添加此样式。

css

.right {
 clear: both;
}

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

2 个答案: