Make WordPress Core

Opened 21 months ago

Last modified 6 months ago

#26396 new enhancement

Implement a generic clearfix

Reported by: helen Owned by:
Milestone: Awaiting Review Priority: low
Severity: minor Version:
Component: Administration Keywords:
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 (4)

comment:1 @slackbot6 months ago

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

comment:2 @afercia6 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 @joemcgill6 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 @afercia6 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" :)

Note: See TracTickets for help on using tickets.