CSS Layouting : Float

 

    Float merupakan property pada CSS untuk mengatur posisi sebuah element. Sebuah element dapat dipaksa untuk berada di sebelah kiri atau kanan dari parent/pembungkusnya dengan menggunakan property ini.

    Float nilai defaultnya none, kita bisa beri nilai left (elemennya akan berada dikiri) dan right (elemennya akan berada dikanan).

contoh :

    diatas saya  mempunyai tiga div dengan lebar dan tinggi 100px dan satu paragraf. sekarang kita coba tuliskan float: left; di kotak kedua. hasilnya : 

    hasilnya kota ketiga akan hilang, sebenarnya kotak ketiga tersebut tidak hilang, tapi kotak tersebut berada dibawah kotak dua. karena kotak dua diberi float jadi kotak terbebut keluar dari jalurnya yang mengakibatkan kotak dua tidak dianggap dan kotak tiga maju keatas.

    jika kita berikan float: right;

    maka kotak tersebut akan berada di sebelah kanan.

    kita dapat menggunakan float untuk membuat

- text-wrapping

    membuat text mengelilingi gambar

    contoh :

    diatas saya telah mempunyai div dan paragraf div bisa diganti dengan foto dll. jika div kita berikan float: left; hasilnya

    jika diberi float right hasilnya:

- image-gallery

    membuat serangkaian gambar menjadi galery

contoh :

    diatas saya mempunyai container dengan lebar 600px dan 3 kotak dengan lebar 100px,400px,100px

jiga ketiga kotak tersebut diberi float: right; maka

    maka kotak tersebut akan berjajar kesamping. dengan catatan ukuran total ketiga div tersebut sama dengan ukuran pembungkusnya(container). jika ukuran ketiga kotak tersebut melebihi pembungkusnya maka kotak terakhir akan pindah kebawah. dalam penggunaan float terdapat satu masalah yaitu pembungkusnya tidak menganggap element didalamnya ada seperti gambar diatas, untuk cara mengatasinya akan dibahas di blog selanjutnya

- multi-column layout

    membuat halaman mempunyai beberapa kolom

contoh:

    

    diatas saya membpunyai 10 kotak dengan ukuran 100px dan pembungkus dengan ukuran 600px. jika diberikan float left maka hasilnya 

    jika diberi float right hasilnya

    

    jika kotak tersebut melebihi ukuran pembungkusnya maka kotak terakhir akan pindah kebawah.

- dll

 masih banyak hal yang bisa dilakukan float