Если у блока выставлено overflow: hidden, он встаёт рядом с float'ом, а не накрывается им. Почему так? И как вообще overflow взаимодействует с размещением блоков?
section {
margin: 1em 0;
border: 4px solid burlywood;
}
section:after {
content: '';
display: block;
clear: both;
}
aside {
float: left;
width: 5em;
background: rgba(160, 160, 160, .5);
border: 4px dotted red;
}
div {
border: 4px solid blue;
}
Ответ
Правила обтекания для float применяются внутри одного блочного контекста форматирования. Блочные элементы, у которых overflow имеет значение отличное от visible получают новый блочный контекст форматирования.
Почему это важно, можно увидеть в статье "MDN: overflow".
Это технически необходимо, поскольку если бы float пересекался с
элементом прокрутки, это потребовало бы обеспечить обтекание
содержимого прокручиваемого элемента вокруг вторгающихся float'ов.
Обтекание при этом было бы необходимо производить после каждого шага
прокрутки заново, что привело бы к заметному замедлению прокрутки.
Кроме того, блочный контекст форматирования может быть создан посредством:
корневого элемента или чего-то, что содержит его
поплавков (элементы, у которых float не равно none)
абсолютно позиционированных элементов (элементами, значение position которых либо absolute, либо fixed)
строчных блоков (элементы с display: inline-block)
ячеек таблиц (элементы с display: table-cell, установленным по умолчанию для ячеек таблицы)
заголовков таблиц (элементы с display: table-caption, установленным по умолчанию для заголовков таблицы)
элементов, у которых значение свойства overflow отличается от visible
flex блоков (элементы с display: flex или inline-flex)
Комментариев нет:
Отправить комментарий