Menu
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?
240
Floats were used before Flexbox and Grid to create entire layouts. It isn't used as much anymore, but you may encounter it in legacy code. The float property essentially "floats" an element to the left or right of its container.
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
Flexbox is a css3 layout model that provides an easy and clean way to arrange items with a container. These are the following reasons to use flexbox over floats. Positioning child elements becomes easier with flexbox. Flexbox is responsive and mobile-friendly.
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.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
