Здравствуйте. В этом видео я расскажу вам, что такое блочный контекст форматирования, какие свойства нужны для того, чтобы создать блочный контекст форматирования, и как заставить блочные элементы избегать плавающие элементы. Итак, блочный контекст форматирования — это такая область на странице, где float элементы взаимодействуют друг с другом. Блочный контекст форматирования создается float элементами, элементами со свойствами position: absolute или fixed, элементы со свойствами display: inline-block | table-cell | table-captions, но не элементы, у которых задано свойство display: block. И также элементы со свойством display block, если у них указано свойство overflow: hidden или auto. Более подробно про блочный контекст форматирования можете почитать по ссылке, которая приложена к видео. Разберем пример. Есть два блока: wrapper 1 и wrapper 2. В блоке wrapper 1 вложено два float элемента со свойствами float: left и float: right. Как только мы задаем блоку свойство overflow: hidden, он создает блочный контекст форматирования, и в этом контексте форматирования float элементы начинают влиять на размеры бокса. Еще один пример. Мы добавляем свойство overflow: hidden блоку wrapper 2. И в этом случае блок начинает избегать float: left и float: right элементы. Рассмотрим еще один пример. Допустим, у нас на странице есть два блока со свойством float: left и обычный блочный элемент. В обычной системе позиционирования float: left элемент будет находиться над блочным элементом, поскольку обычные блочные элементы игнорируют float элементы. И как только мы добавляем боксу свойство overflow: hidden, он начинает его избегать. Рассмотрим еще один вариант, он немного посложнее. Возьмем float: left элемент и положим в него еще один float: left элемент, и в браузере это будет выглядеть вот так. То есть float элемент, который вложен в другой float элемент, будет влиять на его размеры. Почему так происходит? Потому что float элементы создают блочный контекст форматирования. И поэтому элементы, находящиеся внутри или рядом, могут на него влиять. В этом видео вы узнали, как сделать так, чтобы float элементы влияли на блочные элементы. В следующем видео мы разберем несколько примеров с использованием float элементов и систем позиционирования.
