Deskripsi
Pengertian & Penjelasan CSS Clearfix

Clearfix adalah cara praktis yang digunakan untuk clear element yang sebelumnya mengalami float. Clearfix, biasanya digunakan sebagai nama class. Sehingga, kita bisa memanggil ulang kode tersebut dengan nama class di dalam markup.

Clearfix sebenarnya metode lama dalam design layout CSS. Akan tetapi dalam kasus tertentu, teknik ini masih tetap digunakan oleh para web designer. Adapun teknik layout lain yang lebih fleksibel semacam ini, yaitu dengan CSS Flex (Flexbox). Silahkan pelajari selengkapnya mengenai Belajar CSS Flexbox.

Ada banyak metode clearfix yang bisa Anda gunakan. Berikut kami sediakan dua cara yang sering digunakan.

Example 1
Contoh CSS clearfix

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Example 2
Contoh CSS clearfix metode lainnya

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Untuk penggunaannya, Anda bisa melihat pada Contoh Sekaligus Editor yang kami sediakan di bawah ini. Silahkan Anda bereksplorasi. Gunakan salah satu dari dua cara diatas.