CSS float 的疑问 : 当给两个div都设置浮动之后,为什么它们会在同一行显示?

Question

先看代码

MDN:当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，
一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

疑问:MDN中说的是向左或向右移动,一直平移直到碰到了所处的容器的边框。
可是.box2元素为什么是向上移动了吗?

MDN:浮动元素是如何定位的

CSS权威指南(第三版):"浮动元素会生成一个块级框 , 而不论这个元素本身是什么"而且float 不为 none 的时候, 元素的 display 计算值为 block ,那这两个div更不应该位于同一行啊?

Answer 1

往浅了解释：人家不也说了，或者直到碰到另一个浮动元素的边框为止？稍微专业一点的解释：从你的问题可以看出，你的思维还停留在静态定位里面，而浮动元素会脱离文档流，请问你怎么看待脱离文档流？如果还不明白，你可以把你代码里的浮动去掉，然后把定位改成绝对定位看看