时间戳

首页 > 解决方案 > 为什么两个浮动 div 之一被推到下一行？

css - 为什么两个浮动 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>

标签： csscss-float

解决方案

如果第二个 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 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从页面的正常流程中移除，但仍保留为流程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>

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

如果 'width' 计算为 'auto'，则使用的值是“shrink-to-fit”宽度。

缩小以适应宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容而不换行来计算首选宽度，除非出现显式换行，还可以计算首选最小宽度，例如，通过尝试所有可能的换行。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)。参考

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

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

推荐阅读