Overflow dan Float

1
Property Overflow
pada CSS
2
Overflow

▰ Fungsi dari properti overflow pada CSS adalah untuk

mengontrol konten yang terlalu besar atau melewati batas
yang telah ditentukan untuk dimasukkan ke dalam suatu area.
▰ Dengan properti CSS overflow semuanya bisa diatasi, Anda bisa
memilih apakah konten akan dipotong, membuat bilah gulir atau
menampilkan konten keluar dari elemen blok.
▰ Kemungkinan nilai dari properti ini adalah visible, hidden, scroll
dan auto
3
 Overflow
Overflow dengan nilai visible
Secara default, nilai dari properti overflow adalah visible, yang berarti
bahwa itu tidak dipotong dan bisa meluber keluar dari wadah elemen.

Overflow dengan nilai hidden

Jika ingin menyembunyikan konten yang keluar dari wadahnya, yang
dimana lebar dan tinggi pada suatu elemen melebihi dari konten, maka
dengan nilai hidden lah solusinya. Nilai hidden akan memotong konten
yang meluber keluar dan sisanya akan disembunyikan.

4
 Overflow
Overflow dengan nilai scroll
Jika Anda ingin menampilkan konten walaupun lebar dan tinggi pada
suatu elemen melebihi dari konten, maka dengan nilai scroll lah
solusinya. Dengan nilai scroll konten yang meluber akan dipotong dan
scrollbar akan ditambahkan untuk menggulir didalam kotak.

Overflow dengan nilai auto

Hampir sama kegunaannya dengan nilai scroll, hanya saja dengan nilai
auto akan menambahkan scrollbar secara vertikal jika konten meluber
keluar.
5
2
Property Float
pada CSS
6
 Float
▰ Properti float pada CSS digunakan untuk mengatur
elemen agar bisa “float atau mengapung” ke kiri
atau ke kanan. Css float sangat berguna untuk
mengatur design tata letak pada halaman web.
▰ Kemungkinan nilai untuk properti ini adalah:
left – mengapung ke kiri
right – mengapung ke kanan
none – Unsur tidak mengapung. Ini adalah default
inherit – Unsur mewarisi nilai mengapung dari
induknya 7
Property Clear

▰ Jika beberapa elemen “float atau mengapung” ditempatkan

bersebelahan, maka elemen yang lainnya akan ikut
“mengapung” bersebelahan mengisi ruang horizontal yang
tersisa.
▰ Dengan properti clear Anda bisa mengatur
menspesifikasikan elemen yang ikut mengapung apakah
diperbolehkan atau tidak diperbolehkan (matikan).

8
 Property Clear

▰ Kemungkinan nilai properti  clear adalah:

o none – Memungkinkan elemen mengapung di kedua sisi (default)
o left – Tidak diperbolehkan elemen mengapung ke sisi kiri
o right – Tidak diperbolehkan elemen mengapung ke sisi kanan
o both – Tidak diperbolehkan elemen mengapung di kedua sisi kiri
atau sisi kanan
o inherit – Unsur mewarisi nilai dari elemen induknya

9
THANKS!

10