Страницы

Поиск по вопросам

вторник, 9 июля 2019 г.

Все что внутри блока с “position: fixed (или absolute)” не нуждается в clearfix?

Почему не произошло "схлопывание" родителя в примере-1? Каким образом родитель подстроился под float-контейнера, ведь они вырваны из потока? Исходя из этого, можно сделать вывод, что ClearFix не нужен в тех контейнерах, где установлены position:fixed & position:absolute?
.cf:after { clear: both; content: ""; display: block; } .container { background-color: yellow; border: 1px solid red; } .fixed { left: 0; position: fixed; right: 0; top: 0; } .static { position: static; margin: 60px -8px; } .float-left { background-color: orange; float: left; height: 40px; width: 20px; } .float-right { background-color: blue; float: right; height: 40px; width: 20px; } >

1
>
2
3


Ответ

Потому-что создается блочный контекст форматирования, о котором можно почитать здесь или здесь
Здесь перечислено, что его создает:
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible'(except when that value has been propagated to the viewport) establish new block formatting contexts for their contents
Блочный контекст форматирования может быть создан посредством:
корневого элемента или чего-то, что содержит его поплавками (элементы, у которых float не равно none) абсолютно позиционированными элементами (элементами, значение position которых либо absolute, либо fixed) inline-blocks (элементы с display: inline-block) ячейки таблицы (элементы с display: table-cell, установленным по умолчанию для ячеек таблицы) заголовки таблицы (элементы с display: table-caption, установленным по умолчанию для заголовков таблицы) элементы, у которых значение свойства overflow отличается от visible flex блоки(элементы с display: flex или inline-flex)
Смотрим дальше спецификацию
Конкретно строка описывает поведение такого элемента, если в нем лежит плавающий элемент:
10.6.7 'Auto' heights for block formatting context roots
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
Если такой элемент содержит плавающие потомки, высота которых больше родителя, то родитель увеличится, чтобы обернуть их. Поэтому очистка обтекания не нужна.

Комментариев нет:

Отправить комментарий