Elemen Mengambang di Bawah Tag dalam CSS
Misalkan sekarang kita memiliki dua paragraf dan sebuah gambar,
yang ditempatkan di paragraf pertama. Misalkan untuk gambar ini
kita berikan properti float dengan nilai
right, serta transparansi semi:
<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;
}
:
Dan sekarang mari kita letakkan gambar dalam kode HTML setelah paragraf pertama dan lihat apa yang terjadi:
<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;
}
:
Seperti yang kita lihat, gambar dikelilingi oleh teks paragraf kedua, tetapi tidak oleh yang pertama.
Mari kita pindahkan gambar kita sepenuhnya setelah paragraf kedua. Dalam hal ini, gambar akan mengambang di sebelah kanan, tetapi tidak akan ada pengelilingan oleh teks:
<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;
}
:
Ternyata, hanya elemen-elemen yang berada di bawah gambar yang akan mengelilinginya, tetapi bukan elemen-elemen yang berada di atasnya.
