使用 CSS 动态清除浮动

Question

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

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

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

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

我希望能够做到这一点，而无需手动将 <div style="clear:both;"> 放在第三个 div 之后。有没有办法在每 3 个 div 之后选择性地清除浮动元素，即使可能要添加无限的 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。