Pływające elementy pod tagami w CSS
Załóżmy, że mamy teraz dwa akapity i obrazek,
umieszczony w pierwszym akapicie. Załóżmy, że temu obrazkowi
ustawiliśmy właściwość float na wartość
right, a także półprzezroczystość:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
A teraz ustawmy w kodzie HTML obrazek po pierwszym akapicie i zobaczmy, co się stanie:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<img src="img.png" alt="">
<p>
some long text
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Jak widzimy, obrazek jest opływany przez tekst drugiego akapitu, ale nie pierwszego.
Przenieśmy nasz obrazek całkowicie za drugi akapit. W tym przypadku będzie on pływał po prawej stronie, ale nie będzie żadnego opływania:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Okazuje się, że obrazek będzie opływany tylko przez te elementy, które znajdują się pod nim, ale nie przez te, które znajdują się nad nim.
