Downloaded 1,344 times
Uploaded bySandhika Galih
CSS Layouting #4 : Float
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.
- 2. Float merupakan propertipada 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/ “
- 3.
- 4.
- 5. yang bisa dilakukanmenggunakan 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
- 6.
- 7.
- 10.
- 15.
- 19.
- 20. image gallery ketika jumlahteks terlalu sedikit, sehingga tingginya lebih kecil dari tinggi gambar
- 21.
- 22. .container tidak menganggap gambarnyaada / mengabaikannya
- 23. image gallery ketika masihada ruang untuk teks / elemen lain, setelah gambar terakhir
- 24.
- 25.
- 26. multi-column layout ketika kolom-kolomberada di dalam .container
- 27.
- 28. .container-nya collapsed / runtuh, karenamengabaikan adanya kolom-kolom yang diberi float
- 29.
- 30. clear left right both berfungsi menghentikan /membersihkan float
- 31. cara menghentikan /membersihkan float • menggunakan property overflow • menggunakan <div> kosong • menggunakan teknik micro clearfix
- 32.
- 33.
- 34. menggunakan <div> kosong simpandi tempat dimana kita ingin memberhentikan float
- 35.
- 36. menggunakan teknik microclearfix 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 microclearfix
- 38.