html - 使用 CSS 动态清除 float

Question

我正在尝试使用 CSS 创建一个包含 3 栏的博客布局。对于每个新帖子，都会在容器 div 中动态添加一个新的 div。

但是，我在清除 float 时遇到了麻烦，因为我无法手动放置清除元素。

这是现在的样子:http://jsfiddle.net/DZASD/

这就是我想要的样子:http://jsfiddle.net/DZASD/1/

我希望能够在不手动放置 <div style="clear:both;"> 的情况下做到这一点在第三个分区之后。有没有什么方法可以在每第 3 个 div 之后有选择地清除 float 元素，即使可能要添加无限的 div 也是如此？

谢谢!

Answer 1

您可以使用 css 选择器 nth-child将 clear 应用于每个第三个元素。

CSS

.box:nth-child(3n + 1) {
    clear: both;
}

Demo

How nth-child works

注意:nth-child 是 not supported by IE8 and less .