Чисто Свойство CSS было частью CSS с CSS1. Он позволяет указать, какие элементы могут плавать рядом с очищенным элементом и с какой стороны (сторон). Чисто свойство имеет пять возможных значений:
никтооставилправои то и другоеунаследовать
Как использовать свойство CSS clear
Наиболее распространенный способ использования Чисто собственность после того, как вы использовали поплавок свойство на элементе. Например:
- Текст рядом с моим изображением.
- Текст ниже моего изображения.
Все элементы по умолчанию ясно: нет;, поэтому, если вы не хотите, чтобы другие элементы плавали рядом с чем-то, вы должны изменить Чисто стиль.
Когда вы очищаете поплавки, вы сопоставляете свою четкость с вашим поплавком. Поэтому, если вы перемещаете элемент влево, вы должны очистить его влево. Ваш плавающий элемент будет продолжать плавать, но очищенный элемент и все после него будут отображаться под ним на веб-странице.
Если у вас есть элементы, которые перемещаются как справа, так и слева, вы можете очистить только одну сторону, или вы можете очистить и то и другое.
Использование clear в макетах
Наиболее распространенный способ использования Чисто свойство находится в компоновке элементов страницы. У вас может быть изображение, плавающее внутри блока текста, и хотите, чтобы следующий абзац начинался под изображением, или у вас мог бы быть весь столбец текста, который вы хотите плавать рядом с другой связкой текста, с некоторым текстом, появляющимся ниже.
Вот HTML для макета в этой форме. Он имеет один контейнер div, содержащий другой, который перемещается влево.
Это будет работать нормально, при этом более короткий div, плавающий слева от остальной части основного div. Вы можете очистить текст рядом с плавающим полем, просто добавив тег, где вы хотите, чтобы он начинал писать в поле с плавающей точкой. Но проблема возникает, когда плавающий ящик длиннее содержимого рядом с ним. Затем, как вы можете видеть, цвет фона основного блока не переносится на нижнюю часть плавающего окна. К счастью, есть простой способ исправить это: свойство. Установив основной
Короткий плавающий div
Содержимое внутри контейнера div, которое будет находиться справа от плавающего div.переполнение: авто; цвет фона останется рядом с более длинным плавающим ящиком до самого низа, как показано в этом примере.
