CSS浮动导致的下沉问题

Question

我查看了其他关于CSS浮动的帖子，但还没有找到答案。

我有几个宽度相同的div（屏幕的1/3）。它们都设置为向左浮动。当其中一个比其他块更长时，它会将以下块推下。

我制作了一个示例，您可以在http://apsam.dk/misc/float-pushdown-problem/index.php上看到（蓝色div将黄色div推下）。

如果我错过了帖子中的答案，请指出来。我已经仔细查阅了很多内容。

编辑以澄清问题。问题是：如何避免黄色div被推下。

- Dennis Jensen

Answer 1

为了开始新的一行，请输入一个带有clear: both;属性的

标签。

请参考我在另一个帖子中的答案，其中展示了一个例子： 链接

- Dimitri Backaert

---

我没有编辑任何东西，只是通过用 '``' 包围它来强调 clear:both;。单击编辑时间以查看更改，您可以从那里回滚我的更改，抱歉:( - Mahmoud Gamal

没问题 MGA，这样更好...感谢你的补充... :) - Dimitri Backaert

无法解决问题。问题在于div被推下来，添加clear只会使情况更糟。 - Dennis Jensen

Answer 2

浮点数不会像拼图一样拼接在一起。每个浮点数都有一个高度，这个高度是可见的并且被尊重的。你不能让.yellow忽略.blue的高度，特别是在同一个容器中。你可以使用定位来移动.yellow。

这里有演示

或者，你可以使用另一个div将其视为左列，并使其包含绿色和黄色的div。

这里有演示

- Scott

---

谢谢您的回答。我想我会选择您的第二种方法，因为我无法控制每列中会有多少个div。 - Dennis Jensen