CSS Layouting #4 : Float
21 likes12,418 views
CSS float digunakan untuk mengatur posisi elemen dengan memaksa elemen tersebut berada di sebelah kiri atau kanan parent elemennya, sehingga dapat memisahkannya dari normal flow. Float umumnya digunakan untuk membuat galeri gambar, layout berkolom, dan text wrapping. Ada beberapa masalah yang mungkin muncul seperti collapsed container, tetapi dapat diselesaikan dengan menggunakan properti clear.
CSS Layouting #4 : Float
- 1. CSS float
- 2. Float merupakan properti pada CSS untuk mengatur posisi sebuah elemen. Sebuah elemen dapat dipaksa untuk berada di sebelah kiri atau kanan dari parent/ pembungkusnya dengan menggunakan properti ini. https://css-tricks.com/all-about-floats/ “
- 5. yang bisa dilakukan menggunakan properti float • text wrapping membuat teks mengelilingi gambar / elemen lain • image gallery membuat serangkaian gambar menjadi galeri • multi-column layout membuat halaman memiliki beberapa kolom • dll dan masih banyak lagi
- 7. .logo
- 10. image gallery
- 20. image gallery ketika jumlah teks terlalu sedikit, sehingga tingginya lebih kecil dari tinggi gambar
- 22. .container tidak menganggap gambarnya ada / mengabaikannya
- 23. image gallery ketika masih ada ruang untuk teks / elemen lain, setelah gambar terakhir
- 26. multi-column layout ketika kolom-kolom berada di dalam .container
- 27. .container
- 28. .container-nya collapsed / runtuh, karena mengabaikan adanya kolom-kolom yang diberi float
- 29. solusi ?
- 30. clear left right both berfungsi menghentikan / membersihkan float
- 31. cara menghentikan / membersihkan float • menggunakan property overflow • menggunakan <div> kosong • menggunakan teknik micro clearfix
- 34. menggunakan <div> kosong simpan di tempat dimana kita ingin memberhentikan float
- 36. menggunakan teknik micro clearfix teknik yang dibuat oleh Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ untuk menangani bug di browser- browser modern menghentikan / membersihkan float untuk menangani bug di IE 6/7
- 37. menggunakan teknik micro clearfix