Why role do the display and content properties play in a clearfix

Question

This is the definition of bootstrap 4's clearfix,

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

I understand what clear does but not the other two.

Why do we need to add an empty string and make it block?

I've sometimes seem display set to table as well, what does that do?

duplicate of : https://stackoverflow.com/a/52719148/8620333 (explaining why you need block) — Temani Afif, Oct 27 '18 at 10:17
Yep, copied it from here https://getbootstrap.com/docs/4.1/utilities/clearfix/ — nshunz, Oct 27 '18 at 10:17
duplicate of : https://stackoverflow.com/questions/17067918/why-do-the-before-and-after-pseudo-elements-require-a-content-property (explaining the content) — Temani Afif, Oct 27 '18 at 10:17

score 0 · Answer 1 · answered Oct 27 '18 at 10:58

content: ""; means that you are forcing the clearfix element to have empty content. It is similar to the difference between 0 and null— without the empty content, it defaults back to content:none; which is not what we want here, as it won’t apply the style.

Similarly, the default value of the :before or :after pseudo-elements is actually display: inline. Giving them block is what will render them in the desired place.

Why role do the display and content properties play in a clearfix

1 Answers1