Свойство clear
Свойството clear отменя
обвиването на един елемент от други,
зададено със свойството float.
Може да приема следните стойности:
none (отменя действието си),
both (отменя float едновременно отдясно и отляво),
left (отменя float отляво), right (отменя
float отдясно).
Синтаксис
селектор {
clear: none или left или right или both
}
Пример
Нека отменим обвиването на изображението от текста отляво:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
</p>
</div>
.image {
float: left;
padding-right: 10px;
}
.txt {
clear: left;
}
:
Пример
Сега нека отменим обвиването на изображението от текста отдясно:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
Пример
Нека отменим действието на самото
свойство clear:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Вижте също
-
свойство
bottom,
което задава позиция на долния ръб на елемента -
свойство
top,
което задава позиция на горния ръб на елемента -
свойство
left,
което задава позиция на левия ръб на елемента -
свойство
right,
което задава позиция на десния ръб на елемента -
псевдоелемент
::backdrop,
който задава позициониране след първия елемент -
свойство
caption-side,
което задава позиция на заглавието на таблица
