CSS Clear

CSS Fadlullah Fadul December 3, 2018

CSS clear merupakan CSS property yang digunakan untuk membersihkan element yang sebelumnya telah mengalami float. Sehingga, element yang di-clear akan berpisah dari element yang mengalami float dan akan berpindah pada baris baru.

Syntax
Penggunaan Sintaksis CSS clear 

clear: none | left | right | both | initial | inherit;

Value
Nilai CSS property clear

none value

Element dapat di-float pada kedua sisinya.

contoh: clear: none;

left value

Element harus clear pada sisi kiri, artinya float:left sudah tidak berlaku lagi

contoh: clear: left;

right value

Element harus clear pada sisi kanan, artinya float:right sudah tidak berlaku lagi

contoh: clear: right;

both value

Element harus clear pada sisi kanan dan sisi kiri, artinya float:left dan float:right sudah tidak berlaku lagi

contoh: clear: both;

initial value

Value dari property clear akan dikembalikan pada nilai (value) bawaannya (default).

contoh: clear: initial;

inherit value

Value-nya mengikuti (berdasarkan) element induknya.

contoh: clear: inherit;

Example
Contoh CSS clear

CSS 
footer {
  clear: both;
  text-align: center;
}

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo CSS Clear - apacara.com</title>
    <style>
      #content {
        float:left;
        width: 50%;
      }
      #aside {
        float:right;
        width: 50%
      }
      #footer {
        clear: both;
        text-align: center
      }
    </style>
  </head>
  <body>
    <div id="header">
        Mengenal CSS Clear
    </div>

    <div id="content">
      <h1>Belajar CSS Clear </h1>
          <p>Bagaimana menggunakan CSS Clear?. Ini adalah contoh dari CSS Clear. Pada kotak ini memiliki class <em>.container</em>. Kemudian agar elemen setelah ini (footer) tidak <em>float</em> maka digunakan metode clear yang dapat dilihat pada kode CSS.</p>
    </div>

    <div id="aside">
      <h3>mengenai penulis</h3>
    </div>

    <div id="footer">
      <small>Copyright© 2014. Footer ini sudah clear dengan <code>clear:both</code></small>
    </div>

  </body>
</html>
SHARE
Previous Article Next Article