`display: flow-root` is in someway harmful (requires to add extra Element) till spec supports multiple values for “display” like `display: flex flow-root` (I haven’t jet proposed it to W3C) …
Otherwise, to cover cross-browser compatibility, can use:
“`
.clearfix:after {
content: “”;
display: block;
clear: both;
}
@supports (display: flow-root) {
.clearfix {
display: flow-root;
}
.clearfix:after {
display: none;
}
}
“`