CSS Layouting #4 : Float

38
CSS float

Transcript of CSS Layouting #4 : Float

Page 1: CSS Layouting #4 : Float

CSS float

Page 2: CSS Layouting #4 : Float

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/

Page 3: CSS Layouting #4 : Float

float

none left

right

Page 4: CSS Layouting #4 : Float

normal flow vs.

out-of flow

https://www.w3.org/TR/CSS2/visuren.html

Page 5: CSS Layouting #4 : Float

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

Page 6: CSS Layouting #4 : Float

teks wrapping

Page 7: CSS Layouting #4 : Float

.logo

Page 8: CSS Layouting #4 : Float
Page 9: CSS Layouting #4 : Float
Page 10: CSS Layouting #4 : Float

image gallery

Page 11: CSS Layouting #4 : Float
Page 12: CSS Layouting #4 : Float
Page 13: CSS Layouting #4 : Float
Page 14: CSS Layouting #4 : Float
Page 15: CSS Layouting #4 : Float

multi-column layout

Page 16: CSS Layouting #4 : Float
Page 17: CSS Layouting #4 : Float
Page 18: CSS Layouting #4 : Float
Page 19: CSS Layouting #4 : Float

masalah pada float

Page 20: CSS Layouting #4 : Float

image gallery

ketika jumlah teks terlalu sedikit, sehingga tingginya lebih kecil dari tinggi gambar

Page 21: CSS Layouting #4 : Float

lebih rendah dari gambar

Page 22: CSS Layouting #4 : Float

.container tidak menganggap gambarnya ada / mengabaikannya

Page 23: CSS Layouting #4 : Float

image gallery

ketika masih ada ruang untuk teks / elemen lain, setelah gambar terakhir

Page 24: CSS Layouting #4 : Float

teks setelah gambar terakhir

Page 25: CSS Layouting #4 : Float

teks mengisi ruang kosong

Page 26: CSS Layouting #4 : Float

multi-column layout

ketika kolom-kolom berada di dalam .container

Page 27: CSS Layouting #4 : Float

.container

Page 28: CSS Layouting #4 : Float

.container-nya collapsed / runtuh, karena mengabaikan adanya kolom-kolom yang diberi float

Page 29: CSS Layouting #4 : Float

solusi ?

Page 30: CSS Layouting #4 : Float

clear

left right both

berfungsi menghentikan / membersihkan float

Page 31: CSS Layouting #4 : Float

cara menghentikan / membersihkan float

• menggunakan property overflow

• menggunakan <div> kosong

• menggunakan teknik micro clearfix

Page 32: CSS Layouting #4 : Float

menggunakan properti overflow

Page 33: CSS Layouting #4 : Float

menggunakan properti overflow

Page 34: CSS Layouting #4 : Float

menggunakan <div> kosong

simpan di tempat dimana kita ingin memberhentikan float

Page 35: CSS Layouting #4 : Float

menggunakan <div> kosong

Page 36: CSS Layouting #4 : Float

menggunakan teknik micro clearfixteknik 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

Page 37: CSS Layouting #4 : Float

menggunakan teknik micro clearfix