为什么两个浮动的DIV会在同一行上？

Question

CSS权威指南上说浮动元素会生成一个块级框。那为什么左浮动两个DIV时，两个DIV会在同一行上？
无意间有这样的疑问！

Answer 1

看了一下其他回答, 感觉还是说一下比较好.

position 为 relative 或 static, 且 float 不为 none 的时候, 元素的 display 计算值为 block (这三个属性之间关系密切).

display: block 的元素是块级元素, 块级元素生成块级盒(框). 故书上说浮动元素生成块级框是正确的, 毋庸置疑.

然后为什么两个 DIV 盒子会并排呢, 根据浮动规则:

浮动盒将被移动至左侧或右侧直至其外侧紧贴包含盒的边缘或另外一个浮动的外边缘。如果存在行盒，浮动盒的顶部外边缘将与行盒的顶部对齐。

重点我标出来了, 能并排即是规则使然.

更多关于块格式化上下文的规范, 请参阅: https://segmentfault.com/a/11...

Answer 2

（看了下其他答案，然后我又去看了下规格，发现我原先的答案有部分是错的，现在更正过来）

首先，两个div（块级非置换元素）不会显示在同一行内，这种规则是属于常规流的。对于浮动元素，是不在常规流里面的，因此这种规则是不适合的。所以说两个浮动的div在同一行显示也是不奇怪的。

每个块级元素都会生成一个主块级框。（抱歉，这一句话是从规格写明的，原先我说错了。）

像链接元素设置为浮动元素，那么这个浮动元素首先会生成一个块级框，参与常规流的布局。接着才使这个框浮动并重新定位，这个时候的框称之为浮动框。

在CSS规格中：

In the float model, a box is first laid out according to the normal
flow, then taken out of the flow and positioned, typically to the left
or right.

总而言之，浮动元素生成的块级框也只是应用到第一次布局。在之后便会脱离常规流变成浮动，而这个时候他是块级框已经不重要了，因为他应用的是浮动框的规则了。

Answer 3

以下摘自css权威指南-第3版-中文：

如果确实要浮动一个非替换元素，则必须为该元素声明一个width。否则，根据css规范，元素的宽度趋于0。

我理解，这个解释了浮动的div，如果没有指定宽度，那么宽度趋于0，如果有内容，应该就是内容的宽度，也就是宽度自适应；

浮动元素会生成一个块级框，而不论这个元素本身是什么

我理解，浮动的元素，display:block！结合前面，浮动元素具备了：宽度自适应，display:block，这已经很接近行内块元素了,基本上也解释了题主的问题，后面继续规范：

浮动元素的左（右）外边界必须是源文档中之前出现的左（右）浮动元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面

我理解，结合上面就是，浮动元素:宽度自适应,display:block,并且能放一行顶着前一个浮动元素，放一行，放不下顶着前一个浮动元素的底端。
完美的解释了题主的问题！

Answer 4

浮动元素的display会默认转化为inline-block