Belajar Float pada CSS

Float digunakan untuk mengatur posisi elemen HTML, namun float akan membuat elemen tersebut menjadi 'melayang' atau tidak memakan tempat, contoh:

<div style="float:right; border: solid 1px red; width: 400px">Isi div</div>

|

Jika elemen yang memiliki float didalam elemen lain yang tidak diatur floatnya, makan elemen luarnya tidak akan tampil karena tidak memiliki height, contoh:

<div style="background-color: blue">
<div style="float:right; border: solid 1px red; width: 400px">Isi div</div>
</div>
<p>Ada paragraf disini</p>

|

Seharusnya dibelakan elemen ada elemen lagi yang berwarna biru, tetapi itu tidak. Cara mengatasinya adalah dengan menambahkan div yang memiliki property clear: both. ini akan membuat elemen div berada dibawah div yang memiliki float. contoh:

<div style="background-color: blue">
<div style="float:right; border: solid 1px red; width: 400px">Isi div</div>
<div style="clear:both"></div>
</div>
<p>Ada paragraf disini</p>