Создает ли overflow: hidden новый контекст форматирования блока в CSS?

В этой статье мы увидим «Создает ли overflow:hidden новый контекст форматирования блока (BFC)?».

Ответ — да , свойство переполнения со значением, отличным от visible (поскольку его значение по умолчанию), создаст новый контекст форматирования блока. И, как мы знаем, контекст форматирования блока предотвращает схлопывание краев, предотвращает дрейф переноса контента и помогает читателям воспринимать контраст между двумя разными элементами. Это может быть полезно для выравнивания блочного элемента рядом с плавающим элементом.

Пример 1. В следующем примере кода показано, как блочный элемент выравнивается рядом с плавающим элементом без overflow:hidden .

Выход:

Пример 2. В следующем примере кода показано, как блочный элемент выравнивается рядом с плавающим элементом без переполнения: скрытый.

Выход: