Как очистить обтекание (clear) у float-элемента?

Question

Accepted Answer

## Классика float

После float’ов контейнер «схлопывается». Способы:

1. **`clear: both`** на следующем элементе.
2. **Clearfix**: `::after { content: ""; display: table; clear: both; }` (или `display: block`).
3. **Новый BFC** у родителя: `overflow: auto/hidden`, лучше `display: flow-root`.
4. Уйти от float: **flex/grid**.

```css
.row::after {
  content: '';
  display: block;
  clear: both;
}
.modern { display: flow-root; }
```

## Итог

`clear` на сиблинге или BFC/`flow-root` у родителя; в новых вёрстках float почти не нужен.