Properti Clear dan Clearfix CSS

View Categories

Properti Clear dan Clearfix CSS

Properti clear

Ketika menggunakan properti float, dan menginginkan elemen berikutnya di bawah (bukan di kanan atau kiri), maka harus menggunakan properti clear.

Properti clear dapat menentukan apa yang harus terjadi dengan elemen yang berada di sebelah elemen yang mengapung.

Properti clear dapat memiliki salah satu dari nilai berikut:

  • none – Elemen tidak didorong di bawah elemen mengapung kiri atau kanan. Ini nilai default.
  • left – Elemen didorong di bawah elemen mengapung kiri.
  • right – Elemen didorong di bawah elemen mengapung kanan.
  • both – Elemen didorong di bawah elemen mengapung kiri dan kanan.
  • inherit – Elemen mewarisi nilai dari induknya.

Contoh

Pada contoh dibawah ini, elemen <div2> akan didorong di bawah kiri elemen <div1> :

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Tanpa properti clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Perhatikan bahwa div2 berada setelah div1 dalam kode HTML. Namun, karena div1 mengapung ke kiri, teks di div2 mengalir di sekitar div1.</div>
<br><br>

<h2>Dengan properti clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Di sini, dengan menggunakan properti clear: left, memindahkan div4 ke bawah div3. Nilai left menghapus elemen melayang ke kiri.</div>

</body></html>

Jalankan Contoh

Penggunaan clearfix

Jika elemen mengambang lebih tinggi dari elemen yang memuatnya, ia akan ditempatkan keluar dari wadahnya. Penggunaan clearfix dapat menyelesaikan masalah ini:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Tanpa clearfix</h2>

<p>Gambar ini mengapung ke kanan. Gambar ini juga lebih tinggi dari elemen yang menjadi wadahnya, sehingga meluap di luar wadahnya.</p>

<div>
<img class="img1" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>

<h2 style="clear:right">Dengan clearfix</h2>
<p>Kita dapat memperbaikinya dengan menambahkan class clearfix dengan overflow: auto ke elemen yang menjadi wadah.</p>

<div class="clearfix">
<img class="img2" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>

</body></html>

Jalankan Contoh

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Tanpa clearfix</h2>

<p>Gambar ini mengapung ke kanan. Gambar ini juga lebih tinggi dari elemen yang menjadi wadahnya, sehingga meluap di luar wadahnya.</p>

<div>
<img class="img1" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>

<h2 style="clear:right">Dengan clearfix hack</h2>
<p>Tambahkan clearfix hack ke elemen wadah, untuk memperbaiki masalah ini.</p>

<div class="clearfix">
<img class="img2" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Properti Float CSS
Tutorial setelahnya : Contoh Penggunaan Properti Float Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan