title: Is there a way to use the clearfix hack alongside flexbox?
body: <p>I've been using flexbox for layouts, with CSS floats as a fallback for older browsers. On the whole this works well, since browsers that understand <code>display: flex</code> will ignore float on any flex items.</p>
  
  <p>However, the one place that I've run into a problem with this approach is with clearfix. <a href="http://cssmojo.com/latest_new_clearfix_so_far/" rel="noreferrer">Clearfix</a> is a widely-used hack that uses an invisible <code>:after</code> pseudo-element to make a container properly clear / contain any floated elements inside it. However, the problem is that this pseudo-element is treated as a flex item by browsers that support flexbox, which can lead to unexpected layout issues. For example, if you have two flex items and use <code>justify-content: space-between</code>, instead of being positioned at the start and end of the flex container, they will appear in the start and middle, with the invisible clearfix <code>::after</code> pseudo-element taking the end position.</p>
  
  <p>My question is: is there a way to use clearfix alongside a flexbox layout without causing these problems?</p>