Интересует что это, и для чего это используется на сегодняшний день)
Данный элемент используют после использования float элементов для того что бы прекратить обтекание, раньше писали вроде просто clear в следующем блоке, если не ошибаюсь, но затем придумали такую штуку как Clearfix.
Как он работает?
В общем с помощью псевдоэлемента after задается свойство content, с помощью которого далее мы можем добавлять что то(какой то контент) на нашу страницу. Задается класс clearfix для родительского элемента, в котором собственно находятся плавающие элементы.