使用 CSS 动态清除浮动

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

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

现在看起来是这样的：http://jsfiddle.net/DZASD/ http://jsfiddle.net/DZASD/

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

我希望能够做到这一点，而无需手动放置<div style="clear:both;">第三分区之后。即使有可能添加无限的 div，是否有某种方法可以在每 3 个 div 后有选择地清除浮动元素？

Thanks!

您可以使用 css 选择器nth-child https://developer.mozilla.org/en-US/docs/Web/CSS/%3anth-child申请clear到每个第三个元素。

CSS

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

Demo http://jsfiddle.net/DZASD/5/

How nth-child works http://css-tricks.com/how-nth-child-works/

Note: nth-child is IE8及更低版本不支持 http://caniuse.com/css-sel3.