In course of #desktop_improvements project's {T240489} I've re-encountered the horrific `.visualClear` class.
It mostly results in having an empty `div` DOC 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 DOC element, but be used on container element for floated child elements
Such 'clearfix' mixin' would also enable us to exchange the containing internals with [[ https://caniuse.com/#feat=flow-root | `display: flow-root;` ]] once widely enabled, leaving the public syntax intact.
Different implementations and their behavior: https://codepen.io/DemianX0/pen/PoZjBxx
List of places where `.clearfix` is used: T254195#6255319