CSS clear left every 3rd element

Question

I feel like peter griffin in that CSS meme, messing around with CSS. Can someone please explain how I can get rows of 3 and why the code below isn't working?

Here is a jsfiddle example to give more context

  <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

There is a class .mdl-grid in #container that defines #container as a flexbox-container. That makes its children flex-items (i.e. float is deactivated by that)

Overwrite that with

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

and change the last selector to

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

Here's the changed fiddle (I know, the white background doesn't fit, but you'll have to fix that by yourself...)

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