After clear both
Автор Быстрый Бизон задал вопрос в разделе Верстка, CSS, HTML, SVG
Объясните принцип работы ".clearfix::after { display: table; content: ""; clear: both; }" и получил лучший ответ
Ответ от Андрей[гуру]
Именно табличное отображение совершенно лишнее. Подойдёт любое блочное. Так что куда чаще используется display: block;
After определяет то, что будет выведено после данного элемента.
Before и after без атрибута content вообще не работают. Так что content должен быть всегда. Content определяет текст, который будет выведен. В данном случае это пустая строка и не будет выведено ничего, но будут применены указанные свойства CSS.
А всё в целом означает, что сразу после каждого элемента с классом clearfix будет применено CSS-свойство clear: both;
ссылка
ссылка
Это короче, чтоб не прописывать блоку каждый раз отменить обтекание .
То это прописывается в CSS и когда нужно чтоб у блока отменить обтекание - clear both, то просто в html class нужно добавить clearfix .
Насчет after, ты можешь с помощью CSS создавать два DOM объекта, не затрагивая HTML.
Вот тебе такой пример работы after и before
http ://codepen.io/Letsrock/pen/WxrkVg
Насчет обтекания все написано ответчиками выше)