Свойство float и его применение: Тренажер CSS

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

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

Список тем

Простое обтекание слева

В этом задании нужно сделать так, чтобы изображение располагалось слева, а текст обтекал его справа. Используйте свойство `float` для изображения.

CSS

.image-left {
  /* Сделайте так, чтобы этот элемент плавал слева */
  input1: input2;
  margin-right: 15px; 
}

.text-block {
  border: 1px solid #ccc; 
  padding: 10px; 
}

                     .image-left {
  /* Сделайте так, чтобы этот элемент плавал слева */
  input1: input2;
  margin-right: 15px; 
}

.text-block {
  border: 1px solid #ccc; 
  padding: 10px; 
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/1.png" alt="Example Image" class="image-left" width="100">
  <p class="text-block">
    Этот текст должен обтекать изображение, которое будет расположено слева. Свойство float позволяет извлечь элемент из обычного потока документа и разместить его у левого или правого края родительского контейнера.
  </p>
</div>

Чтобы элемент 'плавал' слева, а другие элементы обтекали его справа, примените к этому элементу свойство `float` со значением `left`.

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

Результат

Сообщения

Выполнить

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

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

Простое обтекание справа

Теперь задача обратная: разместите изображение справа так, чтобы текст обтекал его слева. Используйте соответствующее значение свойства `float`.

CSS

.image-right {
  /* Заставьте этот элемент плавать справа */
  input1: input2;
  margin-left: 15px; 
}

.text-block {
  border: 1px solid #ccc; 
  padding: 10px; 
}

                     .image-right {
  /* Заставьте этот элемент плавать справа */
  input1: input2;
  margin-left: 15px; 
}

.text-block {
  border: 1px solid #ccc; 
  padding: 10px; 
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/2.png" alt="Example Image" class="image-right" width="100">
  <p class="text-block">
    Этот текст должен обтекать изображение, которое теперь будет расположено справа. Свойство float позволяет извлечь элемент из обычного потока документа и разместить его у левого или правого края родительского контейнера.
  </p>
</div>

Для размещения элемента справа с обтеканием слева используйте свойство `float` со значением `right`.

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

Результат

Сообщения

Выполнить

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

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

Два плавающих блока

Расположите два блока (`div` с классом `box`) рядом друг с другом, используя свойство `float`. Оба блока должны 'плавать' слева.

CSS

.box {
  border: 2px solid dodgerblue; 
  padding: 15px; 
  margin-right: 10px; 
  /* Сделайте так, чтобы блоки плавали слева */
  input1: input2;
  width: 100px; 
}

                     .box {
  border: 2px solid dodgerblue; 
  padding: 15px; 
  margin-right: 10px; 
  /* Сделайте так, чтобы блоки плавали слева */
  input1: input2;
  width: 100px; 
}

HTML

<div class="container">
  <div class="box">Блок 1</div>
  <div class="box">Блок 2</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Отмена обтекания слева (`clear: left`)

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

CSS

.image-float-left {
  float: left; 
  margin-right: 10px; 
  margin-bottom: 10px; 
}

.clear-left {
  /* Отмените обтекание слева для этого элемента */
  input1: input2;
  border-top: 2px solid red; 
  padding-top: 5px; 
}

                     .image-float-left {
  float: left; 
  margin-right: 10px; 
  margin-bottom: 10px; 
}

.clear-left {
  /* Отмените обтекание слева для этого элемента */
  input1: input2;
  border-top: 2px solid red; 
  padding-top: 5px; 
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Отмена обтекания справа (`clear: right`)

Аналогично предыдущему заданию, но теперь изображение 'плавает' справа. Сделайте так, чтобы параграф под классом `clear-right` начинался ниже изображения.

CSS

.image-float-right {
  float: right; 
  margin-left: 10px; 
  margin-bottom: 10px; 
}

.clear-right {
  /* Отмените обтекание справа для этого элемента */
  input1: input2;
  border-top: 2px solid green; 
  padding-top: 5px; 
}

                     .image-float-right {
  float: right; 
  margin-left: 10px; 
  margin-bottom: 10px; 
}

.clear-right {
  /* Отмените обтекание справа для этого элемента */
  input1: input2;
  border-top: 2px solid green; 
  padding-top: 5px; 
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Отмена обтекания с обеих сторон (`clear: both`)

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

CSS

.img-left {
  float: left; 
  margin-right: 10px; 
}

.img-right {
  float: right; 
  margin-left: 10px; 
}

.footer-text {
  /* Отмените обтекание с обеих сторон */
  input1: input2;
  border-top: 2px solid orange; 
  padding-top: 10px; 
  margin-top: 10px; 
}

                     .img-left {
  float: left; 
  margin-right: 10px; 
}

.img-right {
  float: right; 
  margin-left: 10px; 
}

.footer-text {
  /* Отмените обтекание с обеих сторон */
  input1: input2;
  border-top: 2px solid orange; 
  padding-top: 10px; 
  margin-top: 10px; 
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/6.png" alt="Image Left" class="img-left" width="70">
  <img src="https://naytikurs.ru/img/7.png" alt="Image Right" class="img-right" width="70">
  <p class="footer-text">Этот текст должен появиться только после того, как закончатся оба плавающих изображения.</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Простой двухколоночный макет

Создайте базовый макет из двух колонок. Левая колонка (sidebar) и правая колонка (content) должны располагаться рядом. Задайте им свойство `float`.

CSS

.sidebar {
  /* Сделать левой колонкой */
  input1: input2;
  width: 30%; 
  background-color: #f0f0f0; 
  padding: 10px; 
  box-sizing: border-box; 
}

.content {
  /* Сделать правой колонкой */
  input3: input4;
  width: 70%; 
  background-color: #e9e9e9; 
  padding: 10px; 
  box-sizing: border-box; 
}

/* Этот стиль нужен для демонстрации проблемы схлопывания, если не очистить float */
.container {
  border: 2px solid red; 
}

                     .sidebar {
  /* Сделать левой колонкой */
  input1: input2;
  width: 30%; 
  background-color: #f0f0f0; 
  padding: 10px; 
  box-sizing: border-box; 
}

.content {
  /* Сделать правой колонкой */
  input3: input4;
  width: 70%; 
  background-color: #e9e9e9; 
  padding: 10px; 
  box-sizing: border-box; 
}

/* Этот стиль нужен для демонстрации проблемы схлопывания, если не очистить float */
.container {
  border: 2px solid red; 
}

HTML

<div class="container">
  <div class="sidebar">Левая колонка (30%)</div>
  <div class="content">Правая колонка (70%). Она должна быть справа от левой колонки.</div>
</div>
<p>Текст после контейнера.</p>

Чтобы две колонки встали рядом, примените к обеим `float: left;`. Убедитесь, что их суммарная ширина (включая отступы и рамки, если они есть) не превышает ширину родительского контейнера.

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

Результат

Сообщения

Выполнить

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

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

Схлопывание контейнера

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

CSS

.container {
  border: 3px dashed red; 
  /* Пока не добавляйте сюда стили */
}

.container img {
  /* Заставляем все изображения плавать слева */
  input1: input2;
  margin: 5px; 
}

                     .container {
  border: 3px dashed red; 
  /* Пока не добавляйте сюда стили */
}

.container img {
  /* Заставляем все изображения плавать слева */
  input1: input2;
  margin: 5px; 
}

HTML

<p>Контейнер ниже (с красной рамкой) должен содержать изображения, но он схлопнулся:</p>
<div class="container">
  <img src="https://naytikurs.ru/img/8.png" alt="Img 1" width="60">
  <img src="https://naytikurs.ru/img/9.png" alt="Img 2" width="60">
  <img src="https://naytikurs.ru/img/1.png" alt="Img 3" width="60">
</div>
<p>Этот текст идет сразу после контейнера.</p>

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

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

Результат

Сообщения

Выполнить

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

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

Решение схлопывания: Пустой div с `clear`

Исправьте проблему схлопывания контейнера из предыдущего задания. Добавьте в HTML пустой `div` с классом `clearer` после всех плавающих элементов и примените к нему стиль, который отменит обтекание с обеих сторон.

CSS

.container {
  border: 3px dashed blue; 
}

.container img {
  float: left; 
  margin: 5px; 
}

.clearer {
  /* Добавьте стиль для очистки обтекания */
  input1: input2;
  /* Дополнительные свойства для видимости (необязательно) */
  height: 0; 
  line-height: 0; 
  font-size: 0; 
}

                     .container {
  border: 3px dashed blue; 
}

.container img {
  float: left; 
  margin: 5px; 
}

.clearer {
  /* Добавьте стиль для очистки обтекания */
  input1: input2;
  /* Дополнительные свойства для видимости (необязательно) */
  height: 0; 
  line-height: 0; 
  font-size: 0; 
}

HTML

<p>Контейнер ниже (с синей рамкой) теперь должен корректно охватывать изображения:</p>
<div class="container">
  <img src="https://naytikurs.ru/img/8.png" alt="Img 1" width="60">
  <img src="https://naytikurs.ru/img/9.png" alt="Img 2" width="60">
  <img src="https://naytikurs.ru/img/1.png" alt="Img 3" width="60">
  <!-- Этот div должен очистить float -->
  <div class="clearer"></div> 
</div>
<p>Этот текст идет после контейнера.</p>

Один из старых способов решения проблемы схлопывания — добавить в конец контейнера пустой элемент (например, `<div class="clearer"></div>`) и задать ему стиль `clear: both;`. Этот элемент заставит контейнер растянуться до нужной высоты.

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

Результат

Сообщения

Выполнить

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

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

Решение схлопывания: `overflow`

Исправьте проблему схлопывания контейнера другим способом. Вместо добавления пустого `div`, примените свойство `overflow` к самому контейнеру (`div.container`).

CSS

.container {
  border: 3px dashed green; 
  /* Добавьте свойство overflow для решения проблемы схлопывания */
  input1: input2;
}

.container img {
  float: left; 
  margin: 5px; 
}

                     .container {
  border: 3px dashed green; 
  /* Добавьте свойство overflow для решения проблемы схлопывания */
  input1: input2;
}

.container img {
  float: left; 
  margin: 5px; 
}

HTML

<p>Контейнер ниже (с зеленой рамкой) должен корректно охватывать изображения:</p>
<div class="container">
  <img src="https://naytikurs.ru/img/8.png" alt="Img 1" width="60">
  <img src="https://naytikurs.ru/img/9.png" alt="Img 2" width="60">
  <img src="https://naytikurs.ru/img/1.png" alt="Img 3" width="60">
</div>
<p>Этот текст идет после контейнера.</p>

Более современный и чистый способ заставить контейнер учитывать высоту плавающих дочерних элементов — установить для контейнера свойство `overflow` со значением `hidden` или `auto`. Это создает новый контекст форматирования блока (BFC), который 'видит' плавающие элементы.

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

Результат

Сообщения

Выполнить

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

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

Решение схлопывания: Псевдоэлемент `::after` (Clearfix)

Используйте самый распространенный и рекомендуемый метод очистки float — 'clearfix' с помощью псевдоэлемента `::after`. Примените необходимые стили к псевдоэлементу `::after` для класса `.container`.

CSS

.container {
  border: 3px dashed purple; 
}

.container img {
  float: left; 
  margin: 5px; 
}

/* Современный clearfix */
.container::after {
  content: ""; 
  /* Укажите способ отображения псевдоэлемента */
  input1: input2;
  /* Очистите обтекание */
  input3: input4;
}

                     .container {
  border: 3px dashed purple; 
}

.container img {
  float: left; 
  margin: 5px; 
}

/* Современный clearfix */
.container::after {
  content: ""; 
  /* Укажите способ отображения псевдоэлемента */
  input1: input2;
  /* Очистите обтекание */
  input3: input4;
}

HTML

<p>Контейнер ниже (с фиолетовой рамкой) должен корректно охватывать изображения с помощью clearfix:</p>
<div class="container">
  <img src="https://naytikurs.ru/img/8.png" alt="Img 1" width="60">
  <img src="https://naytikurs.ru/img/9.png" alt="Img 2" width="60">
  <img src="https://naytikurs.ru/img/1.png" alt="Img 3" width="60">
</div>
<p>Этот текст идет после контейнера.</p>

Метод clearfix использует псевдоэлемент `::after`, чтобы добавить невидимый контент после всех элементов внутри контейнера и применить к этому контенту `clear: both;`. Основные стили для `.container::after`: `content: "";`, `display: table;` (или `block`), `clear: both;`.

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

Результат

Сообщения

Выполнить

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

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

Отмена float (`float: none`)

Изначально блок с классом `.box` имеет стиль `float: left`. Ваша задача — отменить это свойство, чтобы блок вернулся в нормальный поток документа и занимал всю доступную ширину.

CSS

.box {
  float: left; /* Изначально плавает слева */
  background-color: lightcoral;
  padding: 15px;
  margin-bottom: 10px;
  width: 150px; /* Ширина задана для плавающего состояния */
}

.box.no-float {
  /* Отмените float для этого класса */
  input1: input2;
  background-color: lightskyblue; /* Другой фон для наглядности */
  /* Ширина теперь будет автоматической (по умолчанию для блока) */
}

                     .box {
  float: left; /* Изначально плавает слева */
  background-color: lightcoral;
  padding: 15px;
  margin-bottom: 10px;
  width: 150px; /* Ширина задана для плавающего состояния */
}

.box.no-float {
  /* Отмените float для этого класса */
  input1: input2;
  background-color: lightskyblue; /* Другой фон для наглядности */
  /* Ширина теперь будет автоматической (по умолчанию для блока) */
}

HTML

<div class="container">
  <div class="box">Этот блок плавает слева.</div>
  <div class="box no-float">Этот блок НЕ должен плавать. Он должен быть под первым блоком и занимать всю ширину.</div>
  <div class="box">Этот блок тоже плавает слева (если поместится рядом с первым).</div>
</div>

Чтобы отменить ранее заданное свойство `float` и вернуть элемент в нормальный поток документа, используйте значение `none` для свойства `float`.

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

Результат

Сообщения

Выполнить

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

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

Комбинация float и clear

Создайте макет, где есть шапка, две колонки контента (левая и правая) и подвал. Левая колонка должна плавать слева, правая - тоже слева (рядом с левой). Подвал должен начинаться только после обеих колонок.

CSS

.header, .footer {
  background-color: #ddd; 
  padding: 10px; 
  text-align: center; 
}

.left-col {
  /* Сделать левой колонкой */
  input1: input2;
  width: 40%; 
  background-color: #f2f2f2; 
  padding: 10px; 
  box-sizing: border-box; 
}

.right-col {
  /* Сделать правой колонкой */
  input3: input4;
  width: 60%; 
  background-color: #e2e2e2; 
  padding: 10px; 
  box-sizing: border-box; 
}

.footer {
  /* Подвал должен быть под колонками */
  input5: input6;
  margin-top: 10px; 
}

/* Используем clearfix для обертки колонок, чтобы она их содержала */
.content-wrapper::after {
  content: ""; 
  display: table; 
  clear: both; 
}

                     .header, .footer {
  background-color: #ddd; 
  padding: 10px; 
  text-align: center; 
}

.left-col {
  /* Сделать левой колонкой */
  input1: input2;
  width: 40%; 
  background-color: #f2f2f2; 
  padding: 10px; 
  box-sizing: border-box; 
}

.right-col {
  /* Сделать правой колонкой */
  input3: input4;
  width: 60%; 
  background-color: #e2e2e2; 
  padding: 10px; 
  box-sizing: border-box; 
}

.footer {
  /* Подвал должен быть под колонками */
  input5: input6;
  margin-top: 10px; 
}

/* Используем clearfix для обертки колонок, чтобы она их содержала */
.content-wrapper::after {
  content: ""; 
  display: table; 
  clear: both; 
}

HTML

<div class="page-wrapper">
  <div class="header">Шапка</div>
  <div class="content-wrapper">
    <div class="left-col">Левая колонка (40%)</div>
    <div class="right-col">Правая колонка (60%)</div>
  </div>
  <div class="footer">Подвал</div>
</div>

Задайте `float: left` для обеих колонок (`.left-col`, `.right-col`). Для подвала (`.footer`) используйте `clear: both`, чтобы он не поднимался к колонкам.

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

Результат

Сообщения

Выполнить

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

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