CSS每隔3个元素清除左侧一次

Question

我觉得自己就像那个CSS meme中的peter griffin，在摆弄CSS。有没有人能解释一下我是如何得到3行的，以及为什么下面的代码不能工作？

下面是一个提供更多上下文的jsfiddle example

  <div id="container" class="mdl-grid mdl-cell mdl-cell--12-col mdl-color--white">
      <a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color-text--white mdl-color--blue-A400"
      ng-repeat="i in [1,2,3,4,5,6,7,8,9] track by $index" 
      ng-bind="i">

      </a>
  </div>

#container a {
    line-height: 6rem;
    font-size: 2.5rem;
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    margin-top:10px;
    float:left;
    display:inline-block;
}
#container a:nth-child(3n) {
     color:red !important;
     clear:left;
}

Answer 1

#container中有一个类.mdl-grid，它将#container定义为flexbox-container。这使得它的子对象flex-item(即浮动被停用)

将其覆盖为

#container.mdl-grid {
  display: block;
}

并将最后一个选择器更改为

#container a:nth-child(3n + 1) { ... }

这是更改后的小提琴(我知道，白色背景不适合，但您必须自己解决它…)

https://jsfiddle.net/eqy1f8k4/2/

Answer 2

您正在浮动内嵌的块，这些块是内联的，所以清除浮动不会做任何事情！将display:inline-block更改为display:block。你的容器上还有display:flex，去掉它就好了：https://jsfiddle.net/6w8a8qmt/1/