Разбиране на CSS Clear Property

Ясният CSS собственост е част от CSS от CSS1. Тя ви позволява да укажете кои елементи могат да плават до изчистения елемент и от коя страна или страни. Ясната собственост има пет възможни стойности:

Как да използвате CSS Clear property

Най-често срещаният начин за използване на ясната собственост е, след като сте използвали свойство "float" на елемент. Например:

Текст до моето изображение.

Текст, който е под моя образ.

Всички елементи по подразбиране да изчистят: няма; , така че ако не искате други елементи да плуват до нещо, трябва да промените ясния стил.

Когато изчиствате поплавъците, съответствате на вашите числа към вашите плувки. Така че, ако сте избрали елемента вляво, трябва да изчистите отляво. Вашият плаващ елемент ще продължи да плава, но изчистеният елемент и всичко след него ще се появи под него в уеб страницата.

Ако имате елементи, които са плаващи в дясно и в ляво, можете да изчистите само едната страна или да изчистите и двете.

Използване на ясни в оформлението

Най-често срещаният начин, по който повечето дизайнери използват ясната собственост, е в оформлението на елементите на страницата . Възможно е да имате изображение, плаващо в блок от текстове, и искате следващият абзац да започне под изображението или може да имате цяла колона от текст, която искате да плувате до друг букет текст, като текстът се появява по-долу.

Ето HTML за оформление в тази форма.

Има един контейнер, който държи друг, който се издига наляво.



Кратък плаващ див



Съдържание в контейнера div, което ще бъде отдясно на плаващия div.

Това ще работи добре, като по-краткото разклонение се отклонява наляво от останалата част от съдържанието на основния div.

Можете да изчистите текста до плаващия прозорец, като просто добавите маркер, който искате да започне да пише под плаващото поле.

Но проблемът възниква, когато плаващата кутия е по-дълга от съдържанието до нея. След това, както виждате, цветът на фона на основната кутия не се пренася към дъното на плаващата кутия.

За щастие има лесен начин да се определи това: собствеността. Като настроите главното кутия да прелива: автоматично; цветът на фона остава до по-голямата плаваща кутия до дъното, както е показано в този пример .