Is there a way to use the clearfix hack alongside flexbox?

Question

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 display: flex will ignore float on any flex items.

However, the one place that I've run into a problem with this approach is with clearfix. Clearfix is a widely-used hack that uses an invisible :after 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 justify-content: space-between, 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 ::after pseudo-element taking the end position.

My question is: is there a way to use clearfix alongside a flexbox layout without causing these problems?

Solution 1

One way to handle this would be to consider alternative clearfix methods.

The ::after pseudo-element is one method but, as you noted, it becomes a flex item in a flex container. (See Box #81 in this answer for more details).

But there are various other ways to clear floats. For instance, you could use overflow: auto or overflow: hidden.

Check out some alternatives here:

• What is a clearfix?
• What methods of ‘clearfix’ can I use?
• Clearing Floats: An Overview of Different clearfix Methods

---

Another way to solve your problem uses modernizr.com for feature detection.

From the website:

All web developers come up against differences between browsers and devices. That’s largely due to different feature sets: the latest versions of the popular browsers can do some awesome things which older browsers can’t – but we still have to support the older ones.

Modernizr makes it easy to deliver tiered experiences: make use of the latest and greatest features in browsers which support them, without leaving less fortunate users high and dry.

Solution 2

Try this, it will deal with pseudo-elements in a flex container:

.clearfix::before,
.clearfix::after {
  flex-basis: 0;
  order: 1;
}

Solution 3

I'm not sure if this is the same issue you were having, but I was using a fairly complicated flex setup:

display: flex;
flex-wrap:wrap;
align-items: center;

I ran into a similar issue where I wanted to use clearfix to make sure I could split the content at a certain point, in my case it was to make some data break on specific screen sizes. I was absoutely stumped until I found a solution through trial and error that worked for me:

<div class="clearflex"></div>

.clearflex{
    width:100%;
}

By adding an empty div with 100% width between flex content it seems to make that content break onto the new line exactly like clearfix did. You can also added a height to clearflex if you need some padding between the rows.