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

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

Эффект выпадания флоатов из родителя был большой проблемой при построении сеток. Ведь сетки на флоатах обычно делаются вот так:

  1. Создаём блок-контейнер для колонок.
  2. В контейнер добавляем флоатные блоки-колонки.
  3. Рассчитываем ширины колонок так, чтобы им хватало места в родителе.

Такой подход работает неплохо. Но проблемы начинаются тогда, когда у контейнера есть фон, отличный от фона страницы. Когда колонки выпадали, родитель схлопывался и фон пропадал.

Необходимо было найти способ борьбы с выпаданием. Тут и пригодилось свойство clear:both. Стали применять такую структуру:

<div class="container"> - блок-контейнер
    <div class="column1">...</div> - колонка, флоат
    <div class="column2">...</div> - колонка, флоат
    <div class="clearfix"></div> - распорка с clear:both
</div>

Т. е. начали добавлять после зафлоаченных колонок пустой элемент-распорку со свойством 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 { height: 10px; background: #e74c3c; }
HTML Academy
  1. Добавьте внутрь дива с классом columns-container див-распорку с классом clearfix.
  2. Задайте для .clearfix запрет на обтекание с обеих сторон,
  3. а затем задайте .clearfix нулевую высоту.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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