CSS Clear: правильный способ очистки флоатов

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

Значение clear может быть одним из следующих:

• left: элемент не может обтекать элементы слева
• right: элемент не может обтекать элементы справа
• both: элемент не может обтекать элементы слева и справа
• none: элемент может обтекать другие элементы. Это значение является значением по умолчанию.

Свойство clear может быть применено к любому элементу, который имеет float свойство (float: left, float: right), например, к блокам, изображениям, ссылкам и т.д.

Пример кода, где свойство clear применяется к изображению:

css
img {
   float: left;
   clear: left;
}

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

Пример кода, где свойство clear применяется к ссылке:

css
a {
  float: right;
  clear: right;
}

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

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