title: How to Clear Every Third Box in a Row?
body: <p>I am trying to create an efficient, clean layout for an e-commerce site. This site is being built in-house for my client, I am in charge only of the CSS and basic structure. </p>
  
  <p>I would like to figure out the best STRUCTURAL way to clear every third box in a row. When the boxes are all the same size they float naturally in a grid, but when one of them changes size based on content (this will be common on the site) the boxes shift improperly and break the layout. </p>
  
  <p>I considered/tried two options: </p>
  
  <ol>
  <li><p>I can manually place a div container, with "clear" styles after every third box.</p></li>
  <li><p>I can wrap the boxes in groups of 3, and use element:after to place a clear in this container, which would effectively clear the 3 boxes in the row.</p></li>
  </ol>
  
  <p>Is one of these options better than the other? I know that the "clear" div is not preferable, but is creating a new container to wrap around the 3 boxes that much better? Either way I am still adding a new HTML element to the page. </p>
  
  <p>Is there another option that I am missing? I know it's possible to do either of these options dynamically, but I want to make sure that I choose the more efficient option for this project. That is, I don't have to worry about how the code will be functionally written, I just need to figure out how the final structure will look.</p>
  
  <p>I'm not experienced with this kind of layout and I don't know if there might be things that I haven't discovered yet, as for how to do this. </p>