Apa itu Overflow?
Dalam pembahasan CSS, overflow adalah situasi di mana suatu float element (elemen yang diberi efek float, sudah dibahas di float dan clear dalam CSS) lebih tinggi atau lebih panjang dari elemen yang menampungnya. Ketika ini terjadi maka float elemen akan meluap ke luar jalur, dan ini menjadi sangat tidak elok dipandang, terlihat tidak rapi.
Untuk mengatasinya yaitu dengan menggunakan properti CSS overflow: auto;. Sehingga float elemen yang tadinya keluar jalur akan berada di dalam elemen yang menampungnya secara pas dan rapi. Langkah seperti ini biasa dikenal dengan clearfix.
contoh tanpa overflow
Di bawah ini adalah contoh terjadinya kekacauan ketika float element memiliki tinggi atau panjang yang lebih dibandingkan elemen yang menampungnya.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #73AD21;
}
.img1 {
float: right;
}
</style>
</head>
<body>
<div>
<img class="img1" src="url gambar" alt="sinahu-coding.blogspot.com" width="100" height="140">
ini adalah contoh terjadinya kekacauan ketika float elemen memiliki tinggi atau panjang yang lebih dibandingkan elemen yang menampungnya..
</div>
</body>
</html>
hasilnya :
contoh penggunaan overflow
Di bawah ini adalah contoh penggunaan overflow: auto; untuk mengatasi terjadinya overflow pada suatu float element yang memiliki panjang atau tinggi lebih dibandingkan elemen yang menampungnya.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #73AD21;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class="clearfix">
<img class="img1" src="url gambar" alt="sinahu-coding.blogspot.com" width="100" height="140">
dan ini adalah contoh mengatasi terjadi overflow pada suatu float elemen yang memiliki panjang atau tinggi lebih dibandingkan elemen yang menampungnya..
</div>
</body>
</html>
hasilnya :
Itulah tutorial belajar CSS tentang penggunaan overflow atau melakukan clearfix pada sebuah float element yang keluar jalur. Mudah-mudahan bisa dipahami konco sinahu dan menambah wawasan coding.
0 Komentar untuk "Mengatasi Terjadinya Overflow Element dengan CSS "