Bagaimana Caranya Menggunakan CSS Clearfix
Di artikel kali ini saya akan membahas dan mengimplementasikan Bagaimana Caranya Menggunakan CSS Clearfix, sebelum kita memperaktikanya kita mesti tahu dulu apa itu defenisi dari clearfix.
Clearfix yakni cara mudah yang digunakan bagi clear element yang sebelumnya mengalami, sistem atau cara clearfix ini adalh sistem yang telah lumayan lama di gunakan pada peng-layoutan tetapi masih sering di gunakan hingga sekarang ini .
bagus setelah kita tahu defenisinya saya akan mencontohkan diantara pemakaian clearfix.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Contoh sistem 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 yakni contoh design web dengan CSS float dan sistem clearfix.
</p>
<p>
Cobalah hapus blok kode clearfix di tab CSS, dan lihatlah perbedaannya .
</p>
<p><code>float: left;</code></p>
</article>
</div>
<div id=sidebar>
<aside>
ini yakni sidebar dengan <code>float: right;</code>.
</aside>
</div>
</div>
<footer>
Faktor ini telah normal, sebelumnya telah clear dengan sistem clearfix. <br />
<small>Copyright © 2016.</small>
</footer>
</body>
</html>
karenanya hasilnya akan nampak seperti ini :
baiklah itu saja artikel mengenai Bagaimana Caranya Menggunakan CSS Clearfix, dan hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
