In course of Desktop Improvements (Vector 2022) project's T240489: [Epic] Determine the optimum Vector DOM structure for a11y and performance I've re-encountered the horrific .visualClear class.
It mostly results in having an empty div DOM element with above class, to clear floated elements above. An anti-pattern for presentational purpose only.
For separating presentation and structure, I propose to
- add a 'clearfix' mixin to mediawiki.mixins that
- allows to choose between collapsing margins (display: block) or non-collapsing margins (display: table) for modern browsers to not rely on extra DOM element, but be used on container element for floated child elements
Such 'clearfix' mixin would also enable us to exchange the containing internals with display: flow-root; once widely enabled, leaving the public mediawiki.mixins syntax intact.
Different implementations and their behavior: https://codepen.io/DemianX0/pen/PoZjBxx
List of places where .clearfix is used: T254195#6255319