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?

You might use [Modernizr](http://modernizr.com/download) to detect flexbox support and hide that `::after` element. — Blazemonger, Jan 18 '16 at 15:06

score 3 · Answer 1 · edited May 23 '17 at 12:19

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:

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.

score 2 · Answer 2 · answered Oct 13 '16 at 19:35

2

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

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

answered Oct 13 '16 at 19:35

Mario

21
1

score 1 · Answer 3 · edited Aug 17 '20 at 07:48

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.

score 0 · Answer 4 · answered Mar 12 '18 at 17:06

0

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.

answered Mar 12 '18 at 17:06

L. Zeusman

1
1

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? – Nick F Mar 12 '18 at 17:16

score 0 · Answer 5 · answered Jan 30 '19 at 20:09

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 */
}

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

5 Answers5