float в CSS

За float стоит бесконечное море возможностей и куча проблем.

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

Другими словами, применение float не только модифицирует сам элемент, но и меняет его предков, родственников, потомков и следующие за ним элементы.

У float может быть только одно из трёх значений:

• left и right делает элемент обтекаемым;
• none удаляет аспект обтекания.

Использование float

Цель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.

Чтобы объяснить поведение, используем следующий пример: обтекаемое изображение внутри абзаца.

<p>
  <img src="https://placehold.it/150x150">
  Я решил положиться на случай и выбрал тот каньон, 
  который показался мне самым легкопроходимым, совершив 
  при этом ту же ошибку, что и миллионы других, выбирающих 
  в жизни дорогу полегче, — путь наименьшего сопротивления 
  далеко не всегда приводит к цели. 
</p>

Проблемой вставки изображения в текст является то, что изображение занимает одну строку текста и тем самым увеличивает высоту строки, на которой находится. В нашем случае высота картинки 150px.

Затем мы хотим, чтобы текст обходил изображение:

img { float: left; }

Как вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:

• сперва текст сдвинулся вправо, рядом с изображением;
• затем, когда появилось пространство под изображением, текст заполнил это пространство.

Что делать, если текста недостаточно много?

Обтекаемое изображение выходит за рамки контейнера, потому что оно выше, чем жёлтый контейнер. И как вы можете увидеть, изображение даже визуально разбивает нижележащий абзац.

Я намеренно оставил эту ошибку вёрстки, чтобы продемонстрировать, почему float непредсказуем: он может даже повлиять на свои родственные элементы!

Поскольку float: left вынимает изображение из потока, высота жёлтого абзаца равна высоте его текста. Другими словами, высота изображения не учитывается.

float = block

К обтекаемым элементам автоматически применяется display: block и они в основном будут вести себя как блоки:

• вы можете установить определённую высоту и ширину;
• если высота не установлена, высотой элемента является line-height;
• если применяется width: 100%, то будет выглядеть как блочный элемент.

Очистка float

Свойство clear позволяет вытолкнуть элементы после float. Оно может применяться только к блочным элементам.

HTML

<p>
  <img src="https://placehold.it/150x150">
  <span>За следующим поворотом я обнаружил выход из каньона.</span>
</p>

CSS

img { float: left; }
span { clear: left; display: block; }

Вместо того, чтобы толкать текст рядом с изображением, clear: left выталкивает текст ниже изображения.

Есть разница между тем, что float не задан и применением clear, поскольку изображение располагается на отдельной строке, а не на той же строке, что и текст.

Перейти к заданиям