Tutorial Belajar CSS Part 33 – Mengenal Fungsi CSS Float

Dalam tutorial kali ini kita akan membahas mengenai CSS Float, Property Float ini sering sekali digunakan dalam mengatur letak element pada HTML.

Video Tutorial CSS – Part 33 – Mengenal CSS Float

Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial mengenal CSS Float, bisa diakses melalui video dibawah

Float digunakan untuk mengatur posisi elemen secara horizontal, Value yang bisa anda gunakan untuk property float ini ada left,right,inherit, dan none.

Keterangan :

1. Left : digunakan untuk mengatur posisi elemen berada disebelah kiri
2. Right : digunakan untuk mengatur posisi elemen berada disebelah kanan
3. inherit : agar posisi elemen mengikuti float yang ada di bagian parentnya
4. none : digunakan untuk mengatur agar elemen tidak boleh di float

Langsung saja kita akan contohkan disini penggunaan dari bagian property float, perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama css-float.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

1. Gambar pertama yang menggunakan class=”gambar_1″ kita berikan value left pada property float, sehingga gambar ditampilkan di sebelah kiri dan dilanjutkan dengan paragraf.
2. Gambar kedua yang menggunakan class=”gambar_2″ kita berikan value right pada property float, sehingga gambar ditampilkan di sebelah kanan dan dilanjutkan dengan paragraf.
3. Gambar ketiga yang menggunakan class=”gambar_3″ kita berikan value inherit pada property float, sehingga gambar ditampilkan di sebelah kiri dan dilanjutkan dengan paragraf, karena parent(induk) yaitu body menggunakan value left pada property float
4. Gambar keempat yang menggunakan class=”gambar_4″ kita berikan value none pada property float, sehingga paragraf akan ditampilkan dibawah gambar karena gambar tidak mendapatkan float karena valuenya adalah none.

Property Clear

Property Clear erat kaitannya dengan float, property ini digunakan untuk menghilangkan effect penggunaan float pada element.

Element yang menggunakan property  clear akan berpisah dengan element yang mengalami float dan akan ditampilkan pada baris baru.

Beberapa Value yang bisa digunakan untuk property clear antara lain :

1. none           : elemen akan terkena float pada kedua sisinya
2. left              : elemen tidak akan mendapatkan effect dari float:left
3. right           : elemen tidak akan mendapatkan effect dari float:right
4. both           : elemen tidak akan mendapatkan effect dari float:left dan float:right
5. inherit        : value akan mengikuti nilai dari parent (induknya)
6. initial         : value akan kembali ke nilai default dari clear

Untuk Contohnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama clear.html, lalu kita buka di browser maka hasilnya :

Penjelasan :

1. Pada gambar pertama yang menggunakan class=”gambar_1″ kita menggunakan property float:left sehingga ditampilkan disebelah kiri, dan diikuti oleh paragraf
2. Pada gambar kedua yang menggunakan class=”gambar_2″ kita menggunakan property float:left, tetapi paragraf ditampilkan dibaris baru hal tersebut dikarenakan kita menambahkan clear:left; pada class “dua”, sehingga effect float:left; yang ada pada gambar akan dihilangkan.

Bagaimana teman – teman penggunaan dari property float dan property clear pada css, mudah Bukan ??

Silahkan jika ada yang ingin di didiskusikan bisa di kolom komentar, baik sekian dulu tutorial CSS kali ini sampai jumpa di tutorial selanjutnya.