CSS вопросы : Вопрос 1 : 20

Назовите основные методы очистки потока в CSS. Опишите их достоинства и недостатки.

 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

 

 

 

 

Верно ли наше решение?

Ответ:

1. overflow: hidden или auto


.overflow {
        overflow: hidden;
}


overflow создает новый контекст форматирования, благодаря которому указанный элемент изолируется от внешнего контекста, что позволяет решать одну из задач очистки потока - позволять вложенным элементам с float растягивать своего родителя.
Плюсы: 
- простота кода и общая адекватность поведения.
Минусы: 
- вложенные абсолютно позиционированные элементы обрезаются или вовсе скрываются, если они расположены за границами элемента.

2. clearfix


.clearfix:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
}


Псевдоэлемент :after невиден, нулевой высоты т.е. его фактически нет в потоке, за счет display: block - он растягивается на всю ширину родителя, за счет clear: both достигается цель - очистка потока.
Плюсы: 
- нет необходимости создавать отдельный блочный элемент с clear: both,
- вложенные абсолютно позиционированные элементы не обрезаются обрезаются
Минусы:
- Элемент остается в общем потоке, т.е. его паддинги и марджины его вложенных элементов будут "проваливаться" под элемент в float, если таковой есть рядом с целевым элементом

3. display:table


.table  {
        display: table;
}


display: table, как и overflow: hidden создает свой контекст форматирования, но в отличае от него не обрезает выходящие за его границы абсолютно позиционированные элементы
Плюсы:
- не обрезает элементы
- более адекватное поведение, нежели у clearfix
Минусы:
- элемент ужимает свою ширину по контенту - т.е. ведет себя как таблица

Как возможное решение последнего минуса:


.table  {
        display: table;
}
.table:after {
        content: '. .';
        display: block;
        word-spacing: 9999px;
        height: 0;
        overflow: hidden;
}


За счет того, что в :after 2 точки и пробел между ними в 10к пикселей, этот элемент ни в одних реальных условиях не уберется в ширину экрана, браузер всегда будет растягивать таблицу во всю ширину. Ну а то, что высота элемента нулевая и все выходящее за его границы обрезается, не дает отображать точки.
1 балл


© Copyright © 2017 - 2019 Все права защищены. Бесплатное онлайн образование.