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.
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contoh metode CSS clearfix</title>
</head>
<body>
<header>
<p>Belajar Web Design</p>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
aside, article, section, header, footer, nav {
display: block;
}
body {
font-size: 100%;
margin: 0;
padding: 0;
width: 100%;
background: #FFF;
color: #555;
font: normal 14px Arial, Helvetica, sans-serif;
}
header {
height: 50px;
background: rgba(0,160,210, 1);
overflow: hidden;
}
header p {
font: 110% Georgia, "Times New Roman", Times, serif;
color: white;
text-align: center;
text-transform: uppercase;
line-height: 3em;
letter-spacing:.1em;
margin: 0;
}
.container {
max-width: 80%;
margin: .3em auto .3em;
background: rgba(140,10,145, 1);
padding: .3em;
box-shadow: 1px 1px 3px tomato, -1px -1px 3px tomato;
}
#content {
background: #FFF;
height: 300px;
float: left;
padding: 20px;
width: 60%;
margin-bottom: 20px;
line-height: 1.5
}
#sidebar {
background: #E0EFF1;
height: 300px;
float: right;
padding: 20px;
width: 40%;
margin-bottom: 20px;
}
footer {
max-height: 100px;
line-height: 3em;
background: rgba(30,70,165, .5);
text-align: center;
color: white;
padding: 0 2em;
}
/* CLearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</header>
<div class="container clearfix">
<div id="content">
<article>
<h1>Contoh CSS Clearfix</h1>
<p>
Ini adalah contoh design web dengan CSS float dan metode clearfix.
</p>
<p>
Cobalah hapus blok kode clearfix pada tab CSS, dan lihatlah perbedaannya .
</p>
<p><code>float: left;</code></p>
</article>
</div>
<div id="sidebar">
<aside>
ini adalah sidebar dengan <code>float: right;</code>.
</aside>
</div>
</div>
<footer>
Elemen ini sudah normal, sebelumnya sudah clear dengan metode clearfix. <br />
<small>Copyright© 2016.</small>
</footer>
</body>
</html>
SHARE