#14 CSS – Float dan Clear

Float digunakan untuk menempatkan suatu element berada di sebelah kiri atau kanan dari wadah atau pembungkusnya. Value yang sering digunakan pada property float yaitu left dan right. Sesuai namanya left berarti suatu element berada disebelah kiri dan right untuk kanan. Secara default float memiliki nilai none. Float biasa digunakan dalam pembuatan text wrapping.

Sedangkan clear merupakan property yang digunakan untuk membersihkan float. Clear biasa digunakan bersamaan dengan float. Salah satu cara menggunakan clear yaitu dengan menggunakan syntax clearfix yang bisa di copy dari website
http://nicolasgallagher.com/micro-clearfix-hack/ dan memberikan kelas cf pada element yang akan di clear dari float. Berikut contoh penulisan float dan clear.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">

</head>

<body>
    <h1>Tanpa float</h1>
    <div class="satu"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt necessitatibus soluta aperiam, et eum
        quasi, culpa ipsum error vel eos labore voluptate eius repudiandae magni. Et doloremque quasi iste.</p>
    <h1>Float Left</h1>
    <div class="row cf">
        <div class="dua"></div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quibusdam nulla dignissimos iusto nisi
            ipsam
            id soluta officiis minus esse laborum tempora, veritatis enim totam quod! Perferendis impedit quidem
            voluptatem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem dolore error adipisci,
            laboriosam pariatur eius officiis quas, asperiores labore animi ea hic maxime quos quo cumque accusantium,
            perferendis culpa minus!
        </p>
    </div>
    <div class="row cf">
        <h1>Float Right</h1>
        <div class="tiga"></div>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla debitis sequi totam non praesentium at optio
            laudantium quia facere reiciendis pariatur temporibus, dolor ullam minus iusto nobis ratione sit
            necessitatibus? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda possimus iusto
            voluptatum nostrum illo accusamus! Quibusdam, nostrum? Quae repellendus dicta cum quasi ea dolorem unde,
            magnam assumenda inventore placeat?
        </p>
    </div>
</body>

</html>

style.css

.satu,
.dua,
.tiga {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
}

.dua {
    float: left;
}

.tiga {
    float: right;
}


.cf:before,
.cf:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.cf:after {
    clear: both;
}

Berikut hasil dari code di atas.

float dan clearfix

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *