Containing floated children with `clear-after` (modern clearfix)

CSS
#1

I’d like to propose a new property to cause an element to contain all of its floated children—what is commonly referred to as a “clearfix”.

Given that https://developer.mozilla.org/en-US/docs/Web/CSS/clear and many other sources recommend accomplishing this with:

selector::after { 
   content: "";
   display: block; 
   clear: both;
}

I though that perhaps this would be an appropriate name:

clear-after: both;

One advantage of this over the current recommended approach is that it preserves ::after to be usable by selector, say to render a position: absolute child, which wouldn’t simultaneously be able to accomplish the float containment.

Options could simply be:

clear-after: none; /* Default */
clear-after: both;

clear-after: inherit;

Forgive me if there is active discussion around this elsewhere but I couldn’t find anything after a few searches.

3 Likes
#2

I’ll second this proposal. It would simplify syntax, free up ::after, and make the implementation more obvious.

#3

AFAIK, display: flow-root (previously min-height: contain-floats) is intended for this purpose. (Not implemented yet.)

2 Likes
#4

Yup, the ::after { clear: both; } thing was always a hack. The right solution is to make the container a formatting context; unfortunately, the only way to do that currently is with other hacks (like making it overflow: hidden). display: flow-root is the correct way to force a block element to be a formatting context; please bug browser vendors to implement it.

2 Likes
#5

Tab, could you confirm the corresponding part of the CSS Display spec is stable enough and the flow-root keyword is unlikely to change?

#6

fantasai and I consider it finished and stable design-wise, but no promises can be made until at least one implementation has been done and gotten reasonable adoption.

#7

Thanks, I’ve posted corresponding feature requests for Firefox, Chromium, WebKit, and Edge.

For those read the previous version of this comment: the feature request for Edge has originally been posted in the Edge’s bug tracker, but has been closed on the ground that their bug tracker is for bug reports and not feature requests.

Update (2017-01-02): The feature is already implemented in Firefox Nightly and is going to be available in stable Firefox 53 planned to be released on 2017-04-18.

Update (2017-01-27): The feature is available in Chrome 58 (Canary build) planned to be released as a stable version in early March.

3 Likes
Editing topics and comments gets unavailable after some time
#8

Hey everyone. I was just going to add this to caniuse.com, are there any browsers that support dispoay: flow-root? I’m not aware of any.

#9

Firefox just sent an intent-to-ship email this week, so they should support it in the next few months. Nobody else does yet.

2 Likes
#10

Intent to implement and ship from the Chrome team - https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/k9WOAVA5Ewc

:slight_smile:

3 Likes
#11

caniuse.com now displays vendor support. I originally put in a pull request with just the two mentioned here, and Alexis found future support for Opera as well.

First version shown with support (as of 2017-03-09):

  • Firefox 53
  • Chrome(ium) 58
  • Opera 45
  • IE/Edge None
  • Safari None

I look forward to the clearfix hack finally being resolved.

Modified a codepen I found to demonstrate the result once it’s happened.

#12

Alexis found future support for Opera as well.

Fwiw, Opera 15+ and other Chromium-based browsers like Vivaldi and Yandex browser get Blink-engine features automatically.

#13

Did not know that. Not sure how many people still use Opera, but it’s still good to have.

#14

display: flow-root confirmed working in Firefox Nightly. I run Linux, so I can’t test it in Chrome Canary.

#15

Fwiw, the feature request for Chromium is now marked as fixed, so the feature will likely be really available in Chrome 58 and Opera 45.

The feature request for Edge currently has 1,174 votes.

WebKit’s progress is unknown.

Update (2017-03-07): Opera 45 (currently available as an Opera Developer prerelease) is based on Chromium 58 and supports display: flow-root as expected.

2 Likes
#16

Confirmed working in Firefox 53 release. Chrome(ium) 58 is expected to release later this month or early May (no clear date has been set).

Edit: Apparently Chrome 58 is now stable, so it should be supported there as well. I haven’t got the rollout yet, but will update when I do.

#17

I confirm, display: flow-root works in stable versions of both Firefox 53 and Chrome 58.

Update (2017-05-11): Opera 45 based on Chromium 58 is released and supports display: flow-root as expected.

1 Like