The good old micro clearfix hack is based on using a blank table element to prevent margin-collapse and clear floats. It mentions that this behavior creates anonymous table elements as each HTML table needs those to exist by design, so to my understanding the repaint cycle has 6 new blank elements for each clearfixed element to deal with (table + anon row + anon cell * 2). Does this have any drawbacks relevant to performance during the reflow/repaint cycle? How would you test this?
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
It doesn't pollute the DOM, but the objects may be computed for rendering purposes. Implementations may be able to optimise them out.
But all kinds of boxes are computed during the rendering process. There's no specific need to be concerned about these.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With