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?

Campobello

You might use Modernizr to detect flexbox support and hide that ::after element. – Delfeena

Answer 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.

Concrescence

Answer 2

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

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

Rubirubia

Answer 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.

Pettway

Answer 4

You can set flex-wrap to your flex container and width: 100% to after pseudo element so it will wrap and not mess with alignment.

Alienable

I've just tried this and it doesn't seem to work, as far as I can tell. The :after pseudo-element just takes up all the remaining space but doesn't wrap (so it's as if you are using justify-content: flex-start). Can you point me to a working example of this? – Campobello

Answer 5

One way to achieve that is to use overflow: hidden or overflow: auto on .clearfix & completely remove .clearfix::after.

.clearfix {
    overflow: auto;  /* or overflow: hidden; */
}

However, if you can't use overflow property on .clearfix for some reason, you can use margin-left: auto on the second div (considering your layout has only two column). That way the invisible ::after will be placed in between two layout divs.

.clearfix { ... }
.clearfix::after { .... }
.clearfix > div:last-of-type {
    margin-left: auto;
    /* for justify-content: space-between only.
    * For other option, adjust accordingly */
}

Dardanus