Сетки / Борьба с выпаданием флоатов: псевдораспорки [16/32]
×
Курс «Сетки»

Борьба с выпаданием флоатов: псевдораспорки [16/32]

Хорошие верстальщики не очень любят, когда в вёрстке появляются ненужные дополнительные элементы и стараются от них избавляться.

До поры до времени с блоками-распорками приходилось мириться, т. к. без них было никак не обойтись. Но время шло и в браузерах появилась поддержка так называемых псевдоэлементов.

Псевдоэлементы позволяют с помощью CSS вставить в структуру HTML-документа узлы, которых нет в HTML коде. Т. е. можно вставить в код элемент и не писать его в HTML. Благодаря псевдоэлементам появилось решение проблемы флоатов без использования дополнительного элемента.

Назовём это решение псевдораспорками. Есть несколько его вариаций, но вот одна из распространённых. В CSS добавляется следующее правило:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

А затем класс clearfix добавляется к контейнеру, внутри которого лежат флоатные колонки. После этого в контейнер не нужно добавлять дополнительный элемент-распорку, т. к. распорка создаётся с помощью псевдоэлемента.

Подробнее псевдоэлементы мы разберем в одном из последующих курсов.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Борьба с выпаданием флоатов: псевдораспорки</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <h1>Выпадание из родителя</h1> <!-- ↓ Класс добавьте этому блоку --> <div class="columns-container"> <div class="column column1"> .column1<br> Первая колонка </div> <div class="column column2"> .column2 Вторая колонка </div> </div> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } h1 { margin-top: 0; font-size: 20px; } .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 2px #cccccc; } .columns-container { padding: 10px; background: #ecf0f1; border: 2px solid #34495e; } .column { width: 150px; min-height: 100px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } .column1 { float: left; } .column2 { float: right; } /* Класс псевдораспорки */ .clearfix::after { content: ""; display: table; clear: both; } /* Просто добавлены размеры и фон для псевдоэлемента, чтобы посмотреть, где он находится */ .clearfix-visible:after { content: ""; display: table; clear: both; width: 100%; height: 10px; background: #e74c3c; }
HTML Academy
  1. Добавьте диву с классом columns-container класс clearfix.
  2. Затем замените класс clearfix на clearfix-visible, чтобы увидеть псевдоэлемент-распорку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.