Właściwość clear
Właściwość clear anuluje
opływanie jednego elementu przez inne,
określone właściwością float.
Może przyjmować następujące wartości:
none (anuluje działanie samej siebie),
both (anuluje float jednocześnie z prawej i lewej strony),
left (anuluje float z lewej strony), right (anuluje
float z prawej strony).
Składnia
selektor {
clear: none lub left lub right lub both
}
Przykład
Anulujmy opływanie obrazka tekstem z lewej strony:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
</p>
</div>
.image {
float: left;
padding-right: 10px;
}
.txt {
clear: left;
}
:
Przykład
Teraz anulujmy opływanie obrazka tekstem z prawej strony:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
Przykład
Anulujmy działanie samej
właściwości clear:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Zobacz też
-
właściwość
bottom,
która określa pozycję dolnej krawędzi elementu -
właściwość
top,
która określa pozycję górnej krawędzi elementu -
właściwość
left,
która określa pozycję lewej krawędzi elementu -
właściwość
right,
która określa pozycję prawej krawędzi elementu -
pseudoelement
::backdrop,
który określa położenie za pierwszym elementem -
właściwość
caption-side,
która określa pozycję tytułu tabeli
