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.