Modul 5 CSS Float

Sejarah Float

Dulunya, ketika para developers pertama kali melakukan transisi dari HTML layout berbasis tabel ke layout tanpa tabel, salah satu CSS property yang memberikan peran yang sangat penting, css property itu adalah float.

Untuk materi kali ini, kita akan membahas apa itu Float dan bagaimana float ini memberikan efek terhadap elemen.

Agar lebih memahami bagaimana float digunakan, silahkan amati gambar dibawah ini.

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\print-layout.png

Pada print design, gambar pada halaman di-set sedemikian rupa sehingga teks/tulisan berada rapih disekitar gambar tersebut.

Pada web design, elemen halaman yang diberi properti CSS float berprilaku sama seperti gambar pada print design diatas.

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\web-layout.png

Tujuan CSS Float

  • Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman.
  • Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut.
  • Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.
  • Property:
    E:\Semester 2\Pmrograman Web\modul-5-css-float\images\10.jpg
  • Untuk me-nonaktifkan fungsi float gunakan:
    E:\Semester 2\Pmrograman Web\modul-5-css-float\images\11.jpg

Contoh Float Left

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\float-left.png

Contoh Float Right

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\float-right.png

CSS Float sebagai Struktur Halaman

Selain contoh-contoh diata, float juga dapat digunakan untuk membuat struktur halaman seperti gambar dibawah ini:

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\web-structure.png

Menghilangkan Float

untuk menghilangkan fungsi float pada halaman, gunakan property clear. Sebuah elemen yang diberi property clear tidak akan pindah posisi untuk mengisi kekosongan pada elemen diatasnya. Ilustrasinya dapat dilihat pada gambar dibawah ini:

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\uncleared-footer.png

Gambar diatas menunjukkan bahwa ukuran dari sidebar lebih kecil daripada lebar main content. Elemen footer dibawahnya melihat masih ada ruang kosong dibawah sidebar yang bisa ditempati, sehingga ruang kosong tersebut diisi oleh footer. Untuk memperbaiki masalah ini, digunakan sintaks berikut:

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\clear-float.png

sehingga hasilnya seperti gambar dibawah ini:

E:\Semester 2\Pmrograman Web\modul-5-css-float\images\cleared-footer.png

Modul 5 CSS Float

Leave a Reply

Your email address will not be published. Required fields are marked *