Float CSS | Kita Ngoding CSS#14

Float CSS.- Tutorial CSS yang akan kita bahas pada kesempatan yang baik ini adalah tentang Float CSS.

Float Pada CSS

Float merupakan salah satu properti pada CSS untuk mengatur posisi sebuah elemen. Kalian dapat menggunakan property float ini, untuk memaksa sebuah elemen untuk berada pada sebelah kiri atau sebelah kanan dari parent / pembungkusnya

Adapun value dari float itu sendiri adalah : none, left, right. Value default dari float adalah none.

Perilaku dari float CSS ada dua yaitu normal flow dan out-of flow. Sejauh ini kita telah belajar dengan menggunakan normal flow seperti elemen block atau inline.

Contohnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: auto;
            border: 1px solid ;
            padding: 5px;
        }
        .satu, .dua, .tiga{
            width: 50px;
            height: 50px;
        }
        .satu{
            background-color: red;
        }
        .dua{
            background-color: blue;
        }
        .tiga{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="satu"></div>
        <div class="dua"></div>
        <div class="tiga"></div>
    </div>
</body>
</html>

Outputnya :

Namun setalah kita memberikan nilai pada float, maka namanya adalah out-of flow.

Baca Juga : Struktur Syntax CSS

Contohnya :

        .dua{
            background-color: blue;
            float: left;
            margin-left: 10px;
        }

Pada Class CSS “dua” tambahkan float dengan nilai left, maka div yang ketiga (kotak warna hijau) akan naik keatas, karena div yang kedua (kotak warna biru) dianggap keluar dari normal flow. Namun posisi dari div kedua berada diatas posisi div yang ketiga sehingga div yang ketiga terlihat menghilang. Admin tambahkan margin-left: 10px supaya terlihat jelas.

Coba kalian ubah nilai float menjadi right dan hapus property margin.

Baca Juga : Border CSS

Fungsi Dari Float Pada CSS

Apa sih yang kita bisa lakukan menggunakan float pada CSS?

Penggunaan float css ini biasanya dalam beberapa hal seperti:

Text Wrapping : membuat teks mengelilingi gambar / elemen lain
Image Gallery : membuat serangkaian gambar menjadi galeri
Multi-Column Layout : membuat halaman memiliki beberapa kolom

Dan masih banyak lagi.

Contoh penggunaan Float pada Text Wrapping, Image Gallery, dan Multi-Column :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            margin: auto;
            border: 1px solid ;
            padding: 5px;
        }
        img {
            float: left;
            margin: 5px;
        }
        .kotak{
            width: 80px;
            height: 80px;
            background-color: red;
            color: white; /*warna tulisan*/
            text-align: center;
            line-height: 80px; /*untuk membuat tulisan berada persis ditengah*/
            font-size: 30px;
            margin: 5px;
            float: left;
        }
        .kiri{
            width: 150px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .tengah{
            width: 300px;
            height: 500px;
            background-color: blue;
            float: left;
        }
        .kanan{
            width: 150px;
            height: 500px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Text Wrapping</h1>
        <img src="float.png" alt="Float CSS">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
Labore magni molestias corrupti illum nostrum dolores eos saepe quidem? 
Atque laudantium vel iusto aliquid maiores illo doloribus quaerat sapiente, 
aut voluptatibus natus ullam excepturi doloremque consequatur molestiae soluta 
voluptatum asperiores earum omnis magnam quibusdam, culpa facilis. 
Iure exercitationem libero magnam vel, sed explicabo ipsum eligendi optio 
provident soluta id minus quas ad cumque reprehenderit nesciunt deserunt! 
Fugit in provident repudiandae vero, natus inventore debitis nam minima sed, 
voluptate unde maiores. Provident minus voluptas voluptatibus, aperiam possimus
maxime facere quam molestiae omnis cumque illum quae debitis, eligendi natus velit.
 Veritatis, quis quasi?</p>
    </div>
    <div class="container">
        <h1>Image Gallery</h1>
        <!--div.kotak{$}*10 = shortcut untuk membuat kotak div secara singkat --> 
        <div class="kotak">1</div>
        <div class="kotak">2</div>
        <div class="kotak">3</div>
        <div class="kotak">4</div>
        <div class="kotak">5</div>
        <div class="kotak">6</div>
        <div class="kotak">7</div>
        <div class="kotak">8</div>
        <div class="kotak">9</div>
        <div class="kotak">10</div>
    </div>
    <div class="container">
        <h1>Multi Colomn</h1>
        <div class="kiri"></div>
        <div class="tengah"></div>
        <div class="kanan"></div>
    </div>
</body>
</html>

Cobalah untuk mengganti atau menghapus nilai float: left supaya kalian tahu perbedaannya.

Baca Juga : Pengenalan Struktur HTML

Baiklah admin rasa cukup sekian, mudah-mudahan dengan adanya contoh diatas dapa membantu kita semua dalam memahami penggunaan float css. Berikan komentar kalian jika kalian suka atau tidak suka dengan tulisan admin ini, kolom komentarnya ada dibawah artikel ini.

Kunjungi juga link dibawah ini untuk menambah pengetahuan kalian tentang CSS.

Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |

Syntax CSS | Kita Ngoding CSS #02 |

Selector Pada CSS | Kita Ngoding CSS #03 |

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Membuat Komentar Di CSS | Kita Ngoding CSS #05 |

Code Warna Dalam CSS | Kita Ngoding CSS #06 |

Kode Background CSS | Kita Ngoding CSS #07 |

Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |

Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

CSS Height Dan Width | Kita Ngoding CSS #10 |

Box Model CSS | Kita Ngoding CSS #11 |