奇怪的是，这种问题应该好早就遇到的。

搜了好多资料，大多提到了解决方案（调整顺序/将前面的元素转成float元素）。 然而，好奇的我还是想知道究竟为何换行。

回归到浮动元素的本质： 浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边或右边 。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

再回到问题，上代码说明：

<div class="wrap">
<div class=“center“ >center</div>
<div style=“float:left;“>left</div>
</div>

在解析html代码过程中，先解析 .center 元素，正常的一个块元素，占据整行。当解析到它后面float:left; 元素时，该元素向左浮动，自然会在.center的下一行展示。 float:right;元素同理。

总结说明的是，浮动元素也是相对正常文档流进行定位的。