Make WordPress Core

Opened 22 months ago

Last modified 3 weeks ago

#26396 new enhancement

Implement a generic clearfix

Reported by: helen Owned by:
Milestone: Future Release Priority: low
Severity: minor Version:
Component: Administration Keywords: needs-patch
Focuses: ui, administration Cc:


We have a clearfix defined in core, but it's applied to very specific items. It should be a generic class. We also have an old-school br.clear and a .clear class - should look for those and replace them in core wherever it makes sense.

Change History (6)

comment:1 @slackbot7 months ago

This ticket was mentioned in Slack in #core by valendesigns. View the logs.

comment:2 @afercia7 months ago

  • Focuses ui administration added
  • Keywords ui-fous removed

+1 for this.
A more modern method to contain floated elements would be very useful especially now that core is using a focus style with box-shadows. In many places they're "broken" cause overflow: hidden used to contain floats. See for example: #29897 and #26646. Would suggest:

.contain-floats:after {
    content: '';
    display: table;
    clear: both;

Naming convention to discuss of course.

comment:3 @joemcgill7 months ago

For reference: Chris Coyier has kept a pretty good running diary of the various CSS patterns for this here: https://css-tricks.com/snippets/css/clear-fix/

comment:4 @afercia7 months ago

thanks @joemcgill. Had a second thought about naming convention, I was wrong. With overflow: hidden still in my mind I was thinking to "contain floats" because that's what overflow: hidden actually does, but with the pseudo-element it's really a "clearfix" :)

comment:5 @wonderboymusic3 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

I would love for someone to pick this up - there are divs floating in the breeze all over the place that have no layout, yet contain untold numbers of floated elements

comment:6 @afercia3 weeks ago

Related #28864 among other things tries to introduce a generic rule for this in common.css:

.contain-floats:after {
	content: '';
	display: table;
	clear: both;
Note: See TracTickets for help on using tickets.