float:left和display:block之间的矛盾问题

Question

导航栏使用float:left来将列表项并排排列。然而，使用float不是暗示了使用display:block吗？因此，由于块元素垂直堆叠，为什么float:left会使它们彼此相邻呢？此外，W3C中提到：

在块级格式化上下文中，每个盒子的左外边缘与包含块的左边缘相接触（对于从右向左的格式化，右边缘相接触）。 即使存在浮动，这一点也是正确的（尽管由于浮动，一个盒子的行框可能会缩小），除非该盒子建立了新的块级格式化上下文（在这种情况下，该盒子本身可能会由于浮动变得更窄）。

（强调是我添加的）

这不意味着每个元素无论如何都会以块形式垂直堆叠吗？

- null

---

你有点搞反了：float:left 特别用于 display:block，因为 display:block 默认垂直堆叠。对于 display:inline 或 inline-block 等元素，你不需要 float:left，因为这些元素已经自动侧向堆叠/排序/对齐了。 - myfunkyside

不完全是。我试图为此编辑我的评论，但已经过了5分钟...您还可以在内联元素上使用float:left或right，这不会将display更改为block。但对于内联元素，您也可以使用text-align:right或center，而对于块级元素则不能。这就是为什么（据我所知）float通常用于块级元素的原因。但是内联元素绝对没有隐含的float属性。 - myfunkyside

请阅读：关于浮动（float） - myfunkyside

@myfunkyside：使用float:left或float:right实际上意味着display:block。详见：http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo - Guffa

@Kootling：是的，浮动元素会自动获得display:block属性（除了一些像list-item和table这样的display值）。 - Guffa

Answer 1

在规范的后面，您可以找到有关浮动的部分，其中包括以下内容：

“浮动框向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动框的外边缘。如果存在行框，则浮动框的外部顶部与当前行框的顶部对齐。

如果水平空间不足以容纳浮动框，则将其向下移动，直到它适合或没有更多的浮动框出现为止。

由于浮动框不在流程中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动框不存在一样。但是，旁边的当前和随后创建的行框会根据需要缩短，以腾出浮动框的边距框的空间。”

请注意“由于浮动框不在流程中”，这意味着浮动框不会像块级元素一样在块格式上下文中排列。浮动框按照自己的规则排列，并且不影响流程中的块元素（但可能会影响块内文本流）。

如果有浮动元素跟在非浮动元素后面，浮动元素会被放置在左边或右边，然后非浮动元素会以块状元素的方式排列，就好像浮动元素不存在一样。

两个元素向左和向右浮动，后面跟着一个非浮动元素：

<div class="a"></div>
<div class="b"></div>
<div class="c">text</div>

CSS：

.a { float: left; background: red; width: 50px; height: 50px; }
.b { float: right; background: green; width: 50px; height: 50px; }
.c { background: yellow; height: 100px; }

浮动元素将会出现在非浮动元素的上方，但其中的文本会围绕浮动元素流动。

+------+--------------------------------------+------+
|      |text                                  |      |
|      |                                      |      |
|      |                                      |      |
+------+                                      +------+
|                                                    |
|                                                    |
|                                                    |
+----------------------------------------------------+

演示：http://jsfiddle.net/Guffa/kmbuw53v/

- Guffa