1

我有以下浮动div：

+---------------+ +-----------+
|               | |           |
|               | |   Div-B   |
|               | |Float:left |
|               | |           |
|     Div-A     | |           |
|  Float: left  | +-----------+
|- - - - - - - -|-+-----------+
|               | |           |
|     Ext       | |  Div-C    |
|               | |           |
|- - - - - - - -|-+-----------+
|               |
+---------------+

如您所见，我有三个 div，其中 Div-A 和 Div-B 向左浮动。由于 Div-C (Without Ext area) 没有浮动属性，所以会跳转到 Div-A 右侧的空白处。因此，Div-C 的左边界应该与 Div-A 的右边界相邻。实际上，这也正在发生，即 Div-C 中的文本从 Div-A 的右边界开始。但是在 Google-Chrome 浏览器中，在开发人员工具中，我可以看到实际上 Div-C 的左边框与 Div-A 的左边框相邻。我的问题是为什么 Google-Chrome 显示 Div-C 的左边框与 Div-A 的左边框相邻？

4

2 回答 2

1

根据 CSS2.1 规范，这是floats的正确行为：

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

所以浮动不会影响普通块的边框，只会影响文本。该块仍然占据容器的全部可访问宽度，并且浮动仅与它重叠。但是，对于建立新的块格式化上下文的块（例如具有 display:table 或 overflow:hidden 的块），情况会发生变化。这些块可能会缩短到其文本的宽度（并且在所有浏览器中都这样做，尽管规范并不严格要求这样做）。

于 2013-07-04T17:14:57.197 回答
0

如果 div-c 中有足够的文本超过 div-a 的底部，它将环绕 div-a 的底部，然后与它的左边框相邻。

于 2013-07-04T16:57:00.553 回答