为何两个浮动div中的一个被挤到下一行？技术咨询

这其实是浮动元素和普通块级元素的布局规则差异导致的，我来给你拆解清楚：

情况1：两个Div都设置float:left #

当.right也加上float:left后，它就变成了浮动元素。浮动元素的布局逻辑是：尽量在同一行排列，直到父容器的剩余宽度不足以容纳当前浮动元素的宽度，就会自动换行。

因为你没给.right设置固定宽度，它的宽度是由内部内容撑开的。当内容过多时，.right的宽度加上.left的250px就会超过父容器的总宽度，此时.right就会被挤到下一行——浮动元素不会主动收缩自己的宽度去适配剩余空间，而是优先按照自身内容的宽度来布局。

情况2：.right不设置浮动 #

此时.right是普通的块级元素，它的默认行为是占据父容器的整行宽度，但因为左边有一个脱离文档流的浮动元素.left，CSS的布局规则会让普通块级元素避开浮动元素，填充剩余的空间：

• .right的宽度会自动计算为「父容器宽度 - .left的250px」，不会由内容撑开；
• 哪怕内部内容再多，也只会在这个固定的剩余空间里换行，不会整个Div被挤到下一行。

你的代码示例 #

CSS代码：

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

HTML代码：

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

简单总结一下：浮动元素是「同行排列优先，空间不足则换行」，而普通块级元素在存在浮动元素时是「自动适配剩余空间，内容在空间内换行」，这就是两种布局表现不同的核心原因。

内容的提问来源于stack exchange，提问作者marcel