Halo teman-teman, kita ketemu lagi dalam course HTML & CSS Nusantech Academy. Pada pembahasan sebelumnya kita berhasil mengenal apa itu Property Display dan Position. Masih pada topik yang sama kita akan belajar mengenai Float. Apa itu float dan apa kegunaannya? Simak selengkapnya disini.
Apa itu Float
Float secara bahasa memiliki arti ‘mengambang’. Property Float digunakan untuk mengatur layout dengan membuat sebuah elemen berada di kiri atau kanan sebuah Container.
Float diidentikkan dengan penggunaannya terhadap gambar yang dibuat menyatu dengan paragraf seperti artikel-artikel di koran, majalah atau text wrapping dalam aplikasi pengolah kata. Sebenarnya bukan hanya itu saja kegunaan dari Float, Property ini juga bisa digunakan untuk mengatur posisi elemen-elemen lain, membuat sidebar dsb.
Nilai Float
Mungkin lebih mudah jika kita lihat langsung contoh penggunaannya seperti berikut ini:
Kode HTML:
<body>
<img class="float-image" src="./nusantech.png"/>
<p class="float-container">
PT. Solusi Teknologi Nusantara (Nusantech) is a company that focuses on information technology services and research. We offer our solutions to help your organization, and we are also provide customized solution based on your needs. We are glad to work with many clients who grow together with us
</p>
</body>- Float: left
Membuat elemen berada di kiri Container
Kode CSS:
float-container{
border: 10px dotted red;
padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: left;
}Hasil:
- Float: right
Elemen akan berada di kanan Container
Kode CSS:
.float-container{
border: 10px dotted red;
padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: right;
}Hasil:
- Float: none
Float: none digunakan untuk meniadakan nilai Float. Ini adalah nilai default dari semua elemen.
Kode CSS:
.float-container{
border: 10px dotted red;
padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: none;
}Hasil:
Pasangan Float
Float punya pasangan?
Yups, pasangan dari Float adalah Property Clear. Property ini digunakan untuk menetralkan elemen yang tidak ingin terdampak oleh efek Float.
Misalkan kita punya kasus seperti ini.
Kita mengatur layout kita menggunakan Float. Di layout kita terdapat 2 elemen utama penyusun layout, yakni konten utama di kiri (float: left) dan sidebar di kanan (float: right).
Kemudian kita menginginkan elemen tambahan agar lebih menarik. Mungkin Footer di bawah kedua elemen tersebut? Bukan ide buruk.
Tapi kemudian kita menyadari bahwa hasilnya tidak sesuai ekspektasi kita seperti gambar di bawah.
Kenapa bisa begitu?
Ingat sifat Float yang menyesuaikan elemen seperti contoh sebelumnya? Inilah saatnya kita menggunakan Property Clear untuk mengatasi masalah seperti ini.
Kode CSS:
.footer {
text-align: center;
clear: both;
}
Dari gambar di atas dapat kita simpulkan bahwa Property Clear dapat menetralkan elemen dengan membuat blok sendiri di bawah kedua elemen Float tadi.
Ada beberapa nilai lain dari Property Clear
- Clear: right
Menetralkan efek Float di sebelah kanan.
- Clear: left
Menetralkan efek Float di sebelah kiri.
- Clear: both
Seperti pada kasus yang baru dibahas, menetralkan elemen dari efek Float di kedua sisi.
- Clear: none
Clear None adalah nilai default ketika kita menggunakan Float. nilai Property ini tidak menetralkan elemen dari efek Float.
Penutup
Sekian dulu mengenai pembahasan kali ini. Pada pembahasan berikutnya kita akan belajar mengenai apa itu Overflow. Jika ada pertanyaan atau saran silahkan isi kolom komentar ya!
See you next time!
