Топ контрибуторов
loading
loading
Знаете ли Вы, что

Список полученных сертификатов находится на странице Вашего профиля. Сертификаты можно распечатать или разместить на Вашем сайте.

Лента обновлений
ссылка Nov 24 17:03
Комментарий от fortulyar:
1. Сравнивем ключ с нулом.
2. Формируем хеш с ключа.
3...
ссылка Nov 24 00:27
Комментарий от anniemt6:
а какая разница между var и let в ДАННОМ случае, ЧТО им...
ссылка Nov 24 00:25
Комментарий от anniemt6:
запустите это в консоле, проверьте, выводит от 0 до 9, ...
ссылка Nov 23 23:13
Комментарий от henrikhakobyan:
Ghuh
ссылка Nov 23 13:48
Комментарий от freddylink:
Публичный конструктор класса B не вызывается
Статистика

Тестов: 153, вопросов: 8596. Пройдено: 473040 / 2306702.

CSS / Методы очистки потока в CSS

Автор: klimchek  к списку      

Вопрос
Назовите основные методы очистки потока в 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к пикселей, этот элемент ни в одних реальных условиях не уберется в ширину экрана, браузер всегда будет растягивать таблицу во всю ширину. Ну а то, что высота элемента нулевая и все выходящее за его границы обрезается, не дает отображать точки.

Если Вам понравился вопрос, проголосуйте за него

Голосов: 13  loading...
hyliganoff   Artin   VaitirViz   NellyLucky   lizalisa   Kapoint   bagi   dblclick   Ronny147   Yurii_H   kruvv   Hripunov   FreeFly