Is there a way to use clearfix hack next to flexbox?

Question

I used flexbox for layouts, and CSS floats as a reserve for older browsers. In general, this works well, as browsers that understand display: flexwill ignore the float for any flex items.

However, one place I ran into a problem with this approach is clearfix. Clearfix is a widely used hack that uses an invisible :afterpseudo-element to make the container properly clean / contain any elements inside it floated. However, the problem is that this pseudo-element is considered as an element of flexibility by browsers that support flexbox, which can lead to unexpected layout problems. For example, if you have two flex elements and use justify-content: space-between, instead of being located at the beginning and end of the flex container, they will be displayed at the beginning and middle, with an invisible clearfix ::afterpseudo-element, the end position.

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

Answer 1

One way to solve this problem is to consider alternative clearfix methods.

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

But there are other ways to clean the floats. For example, you can use overflow: autoor overflow: hidden.

Check out some alternatives here:

• What is clearfix?
• What methods of 'clearfix can I use?
• Cleaning floats: an overview of the various clearfix methods

---

: modernizr.com .

-:

- . : , - .

Modernizr : , , .

Answer 2

, flex:

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

Answer 3

flex-wrap flex : 100% -, .

Answer 4

One way to achieve this is to use overflow: hiddeneither overflow: autoinclusion in .clearfixand complete removal .clearfix::after.

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

However, if for .clearfixthat reason you cannot use property overflowin .clearfix, you can use margin-left: autofor the second div (given that there are only two columns in your layout). This way invisible ::afterwill be placed between the two elements of the layout div.

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