Untuk mempercantik tampilan halaman web, pengaturan tata letak adalah hal yang penting salah satunya adalah pengaturan float sebuah konten. Lalu bagaimana caranya? Berikut contoh dan penjelasan tentang float.
Properti float pada akan mengatur bagaimana sebuah elemen harus ditampilkan mengapung (float).
Properti Float
Properti float pada CSS dapat digunakan untuk memposisikan dan memformat konten, misalnya membuat sebuah gambar mengapung di sisi kiri teks dalam container.
Berikut ini adalah beberapa nilai yang dapat dimiliki oleh properti float :
- left – Elemen mengapung di sebelah kiri containernya
- right – Elemen mengapung di sebelah kanan containernya
- none – Elemen tidak mengapung dan akan ditampilkan tepat di tempat muncul di teks (default)
- inherit – Elemen mewarisi nilai float dari induknya
Dalam penggunaannya yang paling sederhana, properti float dapat digunakan untuk membungkus teks di sekitar gambar.
Contoh – float: right;
Contoh berikut menentukan sebuah gambar mengapung pada sebelah kanan dalam teks:
<!DOCTYPE html> <html> <head> <style> img { float: right; } </style> </head> <body> <p>Dalam contoh ini, gambar akan mengapung pada sebelah kanan paragraf, dan teks di paragraf akan mengelilingi gambar.</p> <p><img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p> </body> </html>
Contoh – float: left;
Contoh berikut ini adalah cara menentukan sebuah gambar harus melayang pada sebelah kiri teks:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>Dalam contoh ini, gambar akan mengapung pada sebelah kiri paragraf, dan teks di paragraf akan mengelilingi gambar.</p>
<p><img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Contoh – None float
Dalam contoh berikut, gambar akan ditampilkan tepat di tempat dimana akan muncul teks (float: none;):
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<p>Dalam contoh berikut, gambar akan ditampilkan tepat di tempat dimana akan muncul di teks (float: none;).</p>
<p><img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Sekian penjelasan tentang float, semoga bermanfaat.
