Почему overflow: hidden; не скрывает текст рядом с блоком float?

Question

[Cepesh16]

Насколько я понимаю overflow: hidden; скрывает весь контект который вылезает за блок/
В моем случае с float он не скрывает текст слева, а просто смещает его вниз по ширине блока в котором расположен:


Почему он не скрывается?

Answer 1

[Сергей delphinpro]

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

Comments

[Cepesh16]

Спасибо! Контекст форматирования то что мне нужно было, буду читать

Answer 2

[Шохрух Шаймардонов]

Сработает если задать нижний отступ:

.float-left {
  margin-bottom: 70px /* = 100px - 30px (высота родительского блока - высота блока .float-left) */
}