Понимание CSS Clear Property

был частью

начиная с CSS1. Это позволяет вам указать, какие элементы могут плавать рядом с очищаемым элементом и на какой стороне.

свойство имеет пять возможных значений:

  • никто
  • оставил
  • правильно
  • обе
  • унаследовать

Как использовать CSS Clear Property

Наиболее распространенный способ использования

свойство после того, как вы использовали

свойство элемента. Например:

  • Текст рядом с моим изображением.
  • Текст, который находится ниже моего изображения.

Все элементы по умолчанию

, поэтому, если вы не хотите, чтобы другие элементы плавали рядом с чем-то, вы должны изменить

стиль.

Когда вы очищаете поплавки, вы соответствуете своему клиру своему поплавку. Поэтому, если вы переместили элемент влево, вам следует очистить его влево. Ваш плавающий элемент будет продолжать плавать, но очищенный элемент и все, что после него, появится под ним на веб-странице.

Если у вас есть элементы, которые плавают как вправо, так и влево, вы можете очистить только одну сторону или вы можете очистить

.

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

Наиболее распространенный способ, которым большинство дизайнеров используют

свойство

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

Вот HTML-код для макета в этой форме. У него есть один контейнер div, содержащий другой, который перемещается влево.

Это будет хорошо работать, с более коротким div, плавающим слева от остального содержимого основного div.

Вы можете очистить текст рядом с плавающим блоком, просто добавив тег, где вы хотите, чтобы он начал писать под плавающим блоком.

Но проблема возникает, когда всплывающее окно длиннее содержимого рядом с ним. Тогда, как вы можете видеть, цвет фона основного блока не переносится в нижнюю часть всплывающего блока.

К счастью, есть простой способ исправить это: собственность. Установив в главном окне

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

Ссылка на основную публикацию