Properti float digunakan untuk memposisikan dan memformat konten, misalnya membiarkan gambar melayang ke kiri atau ke kanan dan teks mengalir mengelilinginya (seperti koran).
Meskipun untuk tata letak halaman kini menggunakan Flexbox/Grid, float tetap sangat berguna untuk menyisipkan gambar di tengah-tengah artikel teks panjang.
<!DOCTYPE html>
<html>
<head>
<style>
.img-float {
float: left;
margin: 0 15px 10px 0;
border-radius: 8px;
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=150" class="img-float" alt="Laptop">
<p>Teks paragraf ini otomatis mengalir mengelilingi gambar di sebelah kiri secara alami. Saat paragraf berlanjut lebih panjang ke bawah, teks akan mengalir di bawah gambar dengan rapi.</p>
</body>
</html>Gunakan clear: both; pada elemen setelahnya untuk menghentikan efek aliran float.