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

css css-float flexbox clearfix
Nick F picture Nick F · Jan 18, 2016 · Viewed 9.9k times · Source

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?

Answer

Michael Benjamin picture Michael Benjamin · Jan 18, 2016

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.

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More
How to float 3 divs side by side using CSS?

I know how to make 2 divs float side by side, simply float one to the left and the other to the right. But how to do this with 3 divs or should I just use tables for this purpose?

Read More