Dokumen ini menjelaskan properti CSS overflow dan float, yang digunakan untuk mengontrol konten yang melewati batas elemen dan mengatur tata letak elemen agar dapat mengapung. Nilai-nilai untuk overflow meliputi visible, hidden, scroll, dan auto, sedangkan nilai untuk float mencakup left, right, none, dan inherit. Properti clear digunakan untuk mengatur elemen mana yang diperbolehkan untuk mengapung di samping elemen lainnya.

1. Overflow dan Float

2. Property Overflow
pada CSS
2
1

3. Overflow
3
▰ 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

4. 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
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

5. 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
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

6. Property Float
pada CSS
6
2

7. 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

8. 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

9. Property Clear
▰ Kemungkinan nilai properti clear adalah:
9
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

10. 10
THANKS!