css - :nth-child(3n):after cleafix not working in CSS

Question

你好，我已经尝试了以下我认为应该是有效的 CSS 但它不起作用(使用谷歌浏览器测试)。

<ul>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
</ul>

CSS:

ul li {
    float:left;
}

ul li:nth-child(3):after {
    content:"";
    display:table;
    clear:both;
}

在响应式设计中， float 列表元素应该在列表中的每个第三个元素之后开始一个新行。您有解决方案建议吗？这不是应该起作用吗？

Answer 1

只需像下面这样申请。

 ul li:nth-child(4n) {clear:both;}

DEMO