Float

Когда применяет свойство floatэлемент автоматически приводится в display: block

• задумывалось для обтекания блоков текстом (например обтекание картинки) а не для создания сеток
• возможные значения: left, right

Элементы со свойством float называются "плавающими"

• такие элементы ужимаются под контент
• частично выпадают из потока

Частично выпадают из потока

• такие элементы не видны для последующих блочных элементов
• последующие строчные элементы/текст его обтекают

Минут: если родительский элемент содержит только float-элементы - он их не видит и схлопывается!

Как с этим бороться:

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