Свойство clear для обтекания: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в использовании CSS-свойства `clear`. Это свойство необходимо для управления поведением элементов, которые следуют за элементами с установленным свойством `float`. Вы научитесь предотвращать обтекание элементов слева, справа или с обеих сторон, чтобы создавать предсказуемые и аккуратные макеты. Задания построены от простого к сложному: начиная с очистки обтекания для одного элемента и заканчивая более сложными сценариями с несколькими плавающими блоками и использованием clearfix-техник. Каждое задание потребует от вас дописать недостающие части CSS-кода, чтобы добиться нужного визуального результата.

Список тем

Очистка обтекания слева

У вас есть изображение, для которого установлено обтекание слева (`float: left`), и следующий за ним текстовый параграф. Задача: сделать так, чтобы текст не обтекал изображение, а начинался строго под ним. Вам нужно добавить одно CSS-свойство для параграфа.

CSS

.floated-image {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.text-content {
  /* Добавьте сюда свойство для очистки обтекания слева */
  input1: input2;
}

                     .floated-image {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.text-content {
  /* Добавьте сюда свойство для очистки обтекания слева */
  input1: input2;
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/1.png" class="floated-image" alt="Image 1">
  <p class="text-content">Этот текст должен начинаться под изображением, а не обтекать его справа.</p>
</div>

Чтобы элемент не обтекал другой элемент, плавающий слева, используйте свойство `clear` со значением `left` для элемента, который должен начинаться ниже.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Очистка обтекания справа

Теперь у вас есть изображение с обтеканием справа (`float: right`). Текстовый параграф снова обтекает его. Ваша задача — изменить CSS-код параграфа так, чтобы он начинался под изображением.

CSS

.floated-image-right {
  float: right;
  width: 90px;
  height: 90px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.text-content {
  /* Используйте свойство clear для очистки обтекания справа */
  input1: right;
}

                     .floated-image-right {
  float: right;
  width: 90px;
  height: 90px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.text-content {
  /* Используйте свойство clear для очистки обтекания справа */
  input1: right;
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/2.png" class="floated-image-right" alt="Image 2">
  <p class="text-content">Этот текст не должен обтекать изображение слева, он должен располагаться под ним.</p>
</div>

Для отмены обтекания элемента, плавающего справа, примените к следующему элементу свойство `clear` со значением `right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Очистка обтекания с обеих сторон

В контейнере есть два изображения: одно с `float: left`, другое с `float: right`. Текст между ними пытается разместиться в доступном пространстве. Задача: сделать так, чтобы следующий элемент (в данном случае, нижний параграф) начинался только после того, как закончатся оба плавающих элемента.

CSS

.float-left {
  float: left;
  width: 70px;
  height: 70px;
  margin-right: 5px;
}

.float-right {
  float: right;
  width: 70px;
  height: 70px;
  margin-left: 5px;
}

.footer-text {
  /* Добавьте свойство для очистки обтекания с обеих сторон */
  clear: input1;
}

                     .float-left {
  float: left;
  width: 70px;
  height: 70px;
  margin-right: 5px;
}

.float-right {
  float: right;
  width: 70px;
  height: 70px;
  margin-left: 5px;
}

.footer-text {
  /* Добавьте свойство для очистки обтекания с обеих сторон */
  clear: input1;
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/4.png" class="float-left" alt="Image 4">
  <img src="https://naytikurs.ru/img/5.png" class="float-right" alt="Image 5">
  <p class="footer-text">Этот текст должен быть под обоими изображениями.</p>
</div>

Чтобы элемент начинался ниже всех плавающих элементов (и слева, и справа), используйте свойство `clear` со значением `both`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование пустого div для очистки

У вас есть два блока (`div`) с обтеканием слева. После них идет другой контент, который должен начинаться с новой строки. Один из способов добиться этого — добавить пустой `div` с классом `clearer` после плавающих элементов и применить к нему `clear: both`. Допишите CSS для класса `clearer`.

CSS

.floated-box {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightcoral;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  box-sizing: border-box;
}

input2 {
  /* Добавьте сюда правило для очистки */
  input3: input4;
}

                     .floated-box {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightcoral;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  box-sizing: border-box;
}

input2 {
  /* Добавьте сюда правило для очистки */
  input3: input4;
}

HTML

<div class="container">
  <div class="floated-box">Блок 1</div>
  <div class="floated-box">Блок 2</div>
  <div class="clearer"></div> <!-- Этот div должен очистить обтекание -->
  <p>Этот параграф должен начинаться под плавающими блоками.</p>
</div>

Создайте CSS-правило для селектора `.clearer` и добавьте в него свойство `clear` со значением `both`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Современный clearfix с псевдоэлементом ::after

Вместо добавления пустого `div`, можно использовать псевдоэлемент `::after` для родительского контейнера плавающих элементов. Это более современный и чистый метод ('clearfix'). Допишите CSS для псевдоэлемента `::after` класса `clearfix-container`, чтобы он очищал обтекание.

CSS

.floated-item {
  float: left;
  width: 48%;
  height: 60px;
  background-color: lightgreen;
  margin-right: 2%;
  margin-bottom: 10px;
}

.clearfix-container::input1 {
  content: "";
  display: input2;
  input3: input4;
}

                     .floated-item {
  float: left;
  width: 48%;
  height: 60px;
  background-color: lightgreen;
  margin-right: 2%;
  margin-bottom: 10px;
}

.clearfix-container::input1 {
  content: "";
  display: input2;
  input3: input4;
}

HTML

<div class="clearfix-container">
  <div class="floated-item">Элемент 1</div>
  <div class="floated-item">Элемент 2</div>
  <!-- Нет нужды в дополнительном div -->
</div>
<p>Этот текст идет после контейнера и должен быть под ним.</p>

Для селектора `.clearfix-container::after` нужно установить три свойства: `content: ""` (обязательно для генерации псевдоэлемента), `display: table` (или `block`) и `clear: both`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отмена обтекания для конкретного элемента

У вас есть три блока с `float: left`. Вы хотите, чтобы третий блок начинался под первыми двумя, не обтекая их. Примените свойство `clear` непосредственно к третьему блоку.

CSS

.block {
  float: left;
  width: 100px;
  height: 40px;
  background-color: #87CEEB;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

input1 {
  /* Добавьте свойство clear для этого блока */
  input2: input3;
}

                     .block {
  float: left;
  width: 100px;
  height: 40px;
  background-color: #87CEEB;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

input1 {
  /* Добавьте свойство clear для этого блока */
  input2: input3;
}

HTML

<div class="container">
  <div class="block">Блок 1 (float: left)</div>
  <div class="block">Блок 2 (float: left)</div>
  <div class="block block-3">Блок 3 (должен быть ниже)</div>
</div>

Добавьте CSS-правило для селектора `.block-3` и используйте свойство `clear` со значением `left` (или `both`), чтобы он сместился под предыдущие плавающие блоки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Clearfix и вложенные плавающие элементы

Есть внешний контейнер и внутренний блок, содержащий два плавающих элемента. Высота внутреннего блока не подстраивается под плавающие элементы. Примените clearfix-хак к внутреннему блоку (`inner-box`), чтобы он корректно оборачивал свое плавающее содержимое.

CSS

.outer-container {
  border: 1px solid #ccc;
  padding: 10px;
  width: 250px;
}

.inner-box {
  border: 1px dashed blue;
  margin-bottom: 10px;
  /* Примените clearfix здесь */
}

.inner-float {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

input1::after {
  content: "";
  display: table;
  input2: input3;
}

                     .outer-container {
  border: 1px solid #ccc;
  padding: 10px;
  width: 250px;
}

.inner-box {
  border: 1px dashed blue;
  margin-bottom: 10px;
  /* Примените clearfix здесь */
}

.inner-float {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

input1::after {
  content: "";
  display: table;
  input2: input3;
}

HTML

<div class="outer-container">
  <div class="inner-box">
    <img src="https://naytikurs.ru/img/6.png" class="inner-float" alt="Image 6">
    <img src="https://naytikurs.ru/img/7.png" class="inner-float" alt="Image 7">
    <!-- .inner-box должен содержать эти float'ы -->
  </div>
  <p>Текст после внутреннего блока.</p>
</div>

Используйте псевдоэлемент `::after` для селектора `.inner-box`. Установите `content: ""`, `display: table` (или `block`) и `clear: both`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Свойство clear и несколько колонок

У вас есть структура из трех колонок, созданных с помощью `float: left`. После них идет футер (`footer`). Задача: убедиться, что футер всегда отображается под всеми тремя колонками, независимо от их высоты. Допишите CSS для футера.

CSS

.column {
  float: left;
  width: 30%;
  background-color: #f0e68c;
  padding: 10px;
  margin-right: 3%;
  box-sizing: border-box;
  min-height: 50px;
}

.page-footer {
  margin-top: 15px;
  padding: 10px;
  background-color: #add8e6;
  /* Добавьте свойство для очистки обтекания */
  input1: input2;
}

                     .column {
  float: left;
  width: 30%;
  background-color: #f0e68c;
  padding: 10px;
  margin-right: 3%;
  box-sizing: border-box;
  min-height: 50px;
}

.page-footer {
  margin-top: 15px;
  padding: 10px;
  background-color: #add8e6;
  /* Добавьте свойство для очистки обтекания */
  input1: input2;
}

HTML

<div class="container">
  <div class="column">Колонка 1</div>
  <div class="column">Колонка 2<br>С дополнительным текстом</div>
  <div class="column">Колонка 3</div>
  <footer class="page-footer">Это футер страницы</footer>
</div>

Примените к элементу `footer` свойство `clear` со значением `both` (или `left`, так как все колонки имеют `float: left`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Значение clear: none

По умолчанию, свойство `clear` имеет значение `none`. В этом задании у элемента `.following-element` установлено `clear: left`. Ваша задача — изменить CSS так, чтобы этот элемент снова обтекал плавающий элемент слева, как если бы `clear` не был установлен. Используйте соответствующее значение.

CSS

.floater {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #ffb6c1;
  margin-right: 10px;
}

.following-element {
  background-color: #eee;
  padding: 5px;
  clear: left; /* Измените это значение */
  input1: input2;
}

                     .floater {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #ffb6c1;
  margin-right: 10px;
}

.following-element {
  background-color: #eee;
  padding: 5px;
  clear: left; /* Измените это значение */
  input1: input2;
}

HTML

<div class="container">
  <div class="floater">Float Left</div>
  <div class="following-element">Этот элемент по умолчанию очищает обтекание слева, но должен обтекать.</div>
</div>

Чтобы отменить ранее установленное правило `clear` и разрешить элементу обтекать плавающие элементы, установите `clear: none;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация float и clear на одном элементе

Иногда элемент сам должен быть плавающим, но при этом начинаться ниже других плавающих элементов. У вас есть два блока с `float: left`. Третий блок также должен иметь `float: left`, но при этом он должен начинаться под вторым блоком, а не рядом с ним. Допишите CSS для `.block-3`.

CSS

.block {
  float: left;
  width: 110px;
  height: 40px;
  background-color: #98fb98;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.block-3 {
  /* Добавьте clear и float */
  input1: left;
  input2: left;
}

                     .block {
  float: left;
  width: 110px;
  height: 40px;
  background-color: #98fb98;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.block-3 {
  /* Добавьте clear и float */
  input1: left;
  input2: left;
}

HTML

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
  <div class="block block-3">Блок 3 (float: left, но ниже)</div>
  <div class="block block-4">Блок 4 (float: left, рядом с Блоком 3)</div>
</div>

Для селектора `.block-3` добавьте два свойства: `float: left;` и `clear: left;` (или `clear: both;`). Свойство `clear` сработает до того, как элемент начнет обтекание.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку