Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 37 : Cara Membuat Tombol Dengan CSS. Pada tutorial kali ini, kita akan belajar cara menggunakan property float di CSS untuk mengatur tata letak di layar website.
Properti float CSS adalah properti pemosisian. Property ini digunakan untuk mendorong posisi elemen ke kiri atau kanan, memungkinkan elemen lain untuk membungkusnya. Property ini umumnya digunakan untuk mengatur gambar dan tata letak.
Untuk memahami tujuan dan asal usulnya, mari kita lihat tampilan cetaknya. Dalam tampilan cetak, gambar diatur ke dalam halaman sedemikian rupa sehingga teks membungkusnya sesuai kebutuhan.
Bagaimana Property Float Bekerja
Elemen float hanya secara horizontal. Jadi hanya mungkin untuk memfloat elemen ke kiri atau ke kanan, bukan ke atas atau ke bawah.
- Elemen float dapat dipindahkan sejauh mungkin ke kiri atau ke kanan. Sederhananya, itu berarti elemen float dapat ditampilkan ekstrem kiri atau ekstrem kanan.
- Elemen setelah elemen float akan mengalir di sekitarnya.
- Elemen sebelum elemen float tidak akan terpengaruh.
- Jika gambar float ke kanan, teks mengalir mengelilinginya, ke kiri dan jika gambar float ke kiri, teks mengalir mengelilinginya, ke kanan.
Properti Float CSS
Property | Deskripsi | Nilai |
clear | Properti clear digunakan untuk menghindari elemen setelah floating elemen mengalir di sekitarnya. | left, right, both, none, inherit |
float | Ini menentukan apakah kotak harus mengapung atau tidak. | left, right, none, inherit |
Nilai Property CSS Float
Nilai | Deskripsi |
none | Ini menentukan bahwa elemen tidak melayang, dan akan ditampilkan tepat di mana ia muncul di teks. Ini adalah nilai default. |
left | Ini digunakan untuk mengapungkan elemen ke kiri. |
right | Ini digunakan untuk mengapungkan elemen ke kanan. |
initial | Ini mengatur properti ke nilai awalnya. |
inherit | Ini digunakan untuk mewarisi properti ini dari elemen induknya. |
Contoh Properti Float CSS
Mari kita lihat contoh sederhana untuk memahami properti float CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>Paragraf berikut berisi gambar dengan style
<b>float:right</b>. Hasilnya gambar akan melayang ke kanan dalam paragraf.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyu0ClgqOojjQiBh6zqnkaH7B4SumOaLymUQ&usqp=CAU" alt="Selamat pagi teman"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
Hasil dari kode di atas :
Itu dia cara menggunakan property float untuk mendesain tata letak pada website. Semoga tutorial ini bisa membantu Anda untuk memahami cara penggunaan property float di CSS.
0 Komentar