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

Вы можете подписаться на RSS ленту новых тестов сервиса Quizful, в том числе и отдельно по каждой категории

Лента обновлений
ссылка 01:54:53
Комментарий от Apleuxa:
Абстрактный класс определят структуру, а интерфейс - пов...
ссылка Feb 26 01:30
Добавлен вопрос в тест jQuery - Основы
ссылка Feb 24 09:31
Комментарий от sabogdanov:
Написано же в вопросе, как называется объект? Триггер...
ссылка Feb 23 04:06
Добавлен вопрос в тест C# - Средний уровень
ссылка Feb 21 02:05
Добавлен вопрос в тест Базы данных (теория)
Статистика

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

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