Use display: flow-root for any new code. It creates a new block formatting context, which has the side effect of containing floats inside the element, and it does so in a single declaration with no extra markup. The pseudo-element .clearfix::after { content: ""; display: block; clear: both; } is the version you will recognize from countless legacy codebases, including Bootstrap 3 and earlier. Both achieve the same result; the pseudo-element variant only exists because flow-root was not interoperable until 2018. Pick one technique per project and stick to it; mixing both on the same element is harmless but redundant.

The empty-div technique was the original clearfix back when ::before and ::after had patchy support. It works mechanically (a zero-height block with clear: both extends the parent's height down past the floats) but adds a presentational element to your markup, which is exactly what we tried to escape by moving CSS out of HTML. The right thing to do in a modern codebase is to stop using floats for layout altogether: flexbox or grid replaces every legitimate float-based layout with cleaner code that does not need clearing. Floats still have one good use case, which is wrapping inline content like images around text in articles; that case never needs clearfix because it is the original purpose floats were designed for.