CSS

FLOAT
Float merupakan property pada css untuk mengatur sebuah posisi dari sebuah elemen. Sebuah
elemen dapat dipaksa untuk berada disebelah kiri atau kanandari parent/pembungkusnya dengan
menggunakan property ini.
Value dari float adalah sebagai berikut ini :
 None
 Left
 Right
Flow atau alur tampilan web ada 2 macam :
1. Normal flow (contoh seperti kemarin dibuat)
2. out of flow (dengan menggunakan float)
yang bisa dilakukan float :
 Text Wrapping, membuat tesk mengelilingi gambar/elemen lain
Text HTML
<div class="container">
        <img src="../gambar/logosmktbg.png" alt="logo smk">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, aut? Est accusantium o
fficia exercitationem eos ipsam error consequatur iste sint dolores id quam delectus doloremq
ue maxime deserunt nemo quidem, </p>
</div>

Text CSS
.container{
    width: 600px;
    border: 1px solid black;   
    margin: auto;
}

img{
    float: left;
}
Hasilnya

1|CSS FLOAT
 Image Gallery, membuat serangkaian gambar menjadi gallery
Text HTML
<div class="c2">
        <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>

Text CSS
.c2{
width: 600px;
margin: auto;
padding: 5px;
}

.kotak{
width: 80px;
height: 80px;
background-color: lightskyblue;
text-align: center;
line-height: 80px;
font-size: 30px;
margin: 2px;
float: left;
}

2|CSS FLOAT
 Hasilnya

 Multi-Column-Layout, membuat halaman memiliki beberapa kolom

Text HTML
<div class="c3">
<div class="kiri"></div>
<div class="tengah"></div>
<div class="kanan"></div>
</div>
Text CSS.
c3{
width: 800px;
margin: auto;
padding: 5px;
}

.kiri{
width: 150px;
height: 500px;
background-color: salmon;
float: left;
}

.tengah{
width: 500px;
height: 500px;
background-color: limegreen;
float: left;
}

.kanan{
width: 150px;
height: 500px;
background-color: lightskyblue;
float: left;
}

3|CSS FLOAT
 Hasilnya :

 DKK, dan kawan-kawan

MASALAH DI FLOAT
Parent/container collaps adalah keadaan dimana child-nya tidak tertampung oleh parent-nya.
Adapun solusi dari kasus ini adalah sebagai berikut ini :
 Menggunakan overflow
 Menggunakan <div> kosong
 Menggunakan micro clear-fix

4|CSS FLOAT