Tutorial Belajar CSS Bagian 38 : Cara Menggunakan Property Float di CSS

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.

  1. Elemen float dapat dipindahkan sejauh mungkin ke kiri atau ke kanan. Sederhananya, itu berarti elemen float dapat ditampilkan ekstrem kiri atau ekstrem kanan.
  2. Elemen setelah elemen float akan mengalir di sekitarnya.
  3. Elemen sebelum elemen float tidak akan terpengaruh.
  4. Jika gambar float ke kanan, teks mengalir mengelilinginya, ke kiri dan jika gambar float ke kiri, teks mengalir mengelilinginya, ke kanan.

Properti Float CSS

PropertyDeskripsiNilai
clearProperti clear digunakan untuk menghindari elemen setelah floating elemen mengalir di sekitarnya.left, right, both, none, inherit
floatIni menentukan apakah kotak harus mengapung atau tidak.left, right, none, inherit

Nilai Property CSS Float

NilaiDeskripsi
noneIni menentukan bahwa elemen tidak melayang, dan akan ditampilkan tepat di mana ia muncul di teks. Ini adalah nilai default.
leftIni digunakan untuk mengapungkan elemen ke kiri.
rightIni digunakan untuk mengapungkan elemen ke kanan.
initialIni mengatur properti ke nilai awalnya.
inheritIni 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.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0