Почему роль дисплея и свойств контента играют в ясности

Question

Это определение clearfix загрузчика 4,

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

Я понимаю, что ясно, но не два других.

Зачем нам нужно добавлять пустую строку и делать ее блокированной?

Мне иногда кажется, что дисплей также настроен на таблицу, что это делает?

Answer 1

content: ""; означает, что вы заставляете элемент clearfix иметь пустой контент. Это похоже на разницу между 0 и null & mdash; без пустого содержимого по умолчанию возвращается content:none;, что здесь не то, что нам нужно, так как стиль не будет применяться.

Аналогично, значение по умолчанию для псевдоэлементов :before или :after на самом деле display: inline. Предоставление им блока - это то, что сделает их в нужном месте.