Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Layouting #4 : Float

6,596 views

Published on

Float merupakan properti CSS yang dapat membuat elemen berada di sebelah kiri atau kanan dari pembungkusnya.

Float dapat digunakan untuk beberapa hal berikut :
1. Text Wrapping
2. Image Gallery
3. Multiple Columns

Published in: Education
  • Login to see the comments

CSS Layouting #4 : Float

  1. 1. CSS float
  2. 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/ “
  3. 3. float none left right
  4. 4. normal flow vs. out-of flow https://www.w3.org/TR/CSS2/visuren.html
  5. 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
  6. 6. teks wrapping
  7. 7. .logo
  8. 8. image gallery
  9. 9. multi-column layout
  10. 10. masalah pada float
  11. 11. image gallery ketika jumlah teks terlalu sedikit, sehingga tingginya lebih kecil dari tinggi gambar
  12. 12. lebih rendah dari gambar
  13. 13. .container tidak menganggap gambarnya ada / mengabaikannya
  14. 14. image gallery ketika masih ada ruang untuk teks / elemen lain, setelah gambar terakhir
  15. 15. teks setelah gambar terakhir
  16. 16. teks mengisi ruang kosong
  17. 17. multi-column layout ketika kolom-kolom berada di dalam .container
  18. 18. .container
  19. 19. .container-nya collapsed / runtuh, karena mengabaikan adanya kolom-kolom yang diberi float
  20. 20. solusi ?
  21. 21. clear left right both berfungsi menghentikan / membersihkan float
  22. 22. cara menghentikan / membersihkan float • menggunakan property overflow • menggunakan <div> kosong • menggunakan teknik micro clearfix
  23. 23. menggunakan properti overflow
  24. 24. menggunakan properti overflow
  25. 25. menggunakan <div> kosong simpan di tempat dimana kita ingin memberhentikan float
  26. 26. menggunakan <div> kosong
  27. 27. 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
  28. 28. menggunakan teknik micro clearfix
  29. 29. thankyou. sandhikagalih@unpas.ac.id

×