我有两个 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>
如果第二个 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>
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>
现在，如果两个元素都是浮动的，第一个元素具有固定宽度，但第二个元素的宽度将使用以下公式计算：缩小以适合算法：
如果“width”计算为“auto”，则使用的值为“shrink-to-fit”宽度。
收缩以适合宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：计算通过在不换行的情况下格式化内容来设置首选宽度除了发生显式换行符的情况之外，还计算首选的最小宽度，例如，通过尝试所有可能的换行符。 CSS 2.1 没有定义确切的算法。第三，找到可用宽度：在本例中，这是包含块的宽度减去 'margin-left'、'border-left-width'、'padding-left'、'padding-right'、'border-right-width'、'margin-right' 的使用值以及任何宽度相关的滚动条。
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>
为了避免任何random行为只是固定两个元素的宽度：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
