Using display: flow-root on an element will perform this clearing for us. Instead of needing to apply the clearfix hack we can use the CSS display property on the container with a value of flow-root.
The border then clears the float and following content displays after our contained floated element.
A new value of the display property has landed in Chrome Canary and Firefox Nightlies.
src - https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/
JavaScript:
.container {
display: flow-root;
}The border then clears the float and following content displays after our contained floated element.
A new value of the display property has landed in Chrome Canary and Firefox Nightlies.
src - https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/