CSS Float

  1. › 
  2. ›  › 
  3. CSS Float

Properti CSS - Float

Di halaman ini

  1. CSS float

Pengertian float

Float berarti mengambang.
Properti float pada suatu elemen membuat kedudukan elemen "terangkat" dari tempat asalnya.

Sebelum float

1
2
float 3
4
5

Sesudah float

1
2
float 3
4
5

Properti float merupakan properti sifat yang menetapkan sifat float (mengambang) pada elemen.
Dimana nilai (value) properti float ini mendeklarasikan arah float-nya yaitu :
1. left (kiri).
2. right (kanan).
Contoh diatas menggunakan float: right;

Lihat Kode contoh 
<div class='induk'>
<div class='konten'>1</div>
<div class='konten'>2</div>
<div class='konten float-r'>float 3</div>
<div class='konten'>4</div>
<div class='konten'>5</div>
</div>
<style>
.induk{
       padding:5px;
       margin:20px auto;
       width:100%;
       border:2px solid #ddd;
       clear:both;
       }
</style>
<style>

.konten {
        padding:5px;
        margin:3px;
        text-align:center;
        width:50px;
        border:1px solid #333;
        display:inline-block
        }
.float-r{
        float:right;
        border-color:red;
        }
        
</style>

Contoh float:left;

1
2
float 3
4
5
6
7
8
9
10

Pada contoh diatas ditambahkan 5 elemen tambahan untuk memperlihatkan dampak penggunaan properti float ini terhadap elemen di barisan bawahnya. Dan terlihat bahwa elemen dibawahnya juga ikut terpengaruh sehingga terjadi pergeseran yang tidak diharapkan.

Untuk mengatasi pergeseran elemen karena dampak properti float ini, lihat penjelasan dibawah ini.

Mengatur dampak elemen float

Contoh float:left;

1
2
float 3
4
5
6
7
8
9
10
Cara mengatasi pergeseran akibat penggunaan properti float adalah dengan menempatkan elemen penegas (clear) tepat diatas elemen yang dimaksud (pada contoh diatas adalah elemen nomor 6). 
<div class='clear'></div>
<div class='konten'>6</div>
<div class='konten'>7</div>
<div class='konten'>8</div>
<div class='konten'>9</div>
<div class='konten'>10</div>
<style>
.clear {clear: both;}
</style>

Elemen float berukuran lebih tinggi (over height) dari elemen induk.

Contoh elemen float yang mempengaruhi tata letak elemen yang berada diluar elemen induknya.
Sebelum float
1
2
float 3
4
5
6
7
8
9
10
Sesudah float
1
2
float 3
4
5
6
7
8
9
10
Elemen float yang berukuran lebih tinggi dari elemen induknya tetap memberikan dampak pergeseran posisi elemen meskipun elemen tersebut berada diluar elemen induknya.

Cara mengatasi dampak pergeseran tersebut adalah dengan menempatkan elemen penegas seperti sebelumnya, tapi ditambahkan pseudo elemen seperti dibawah ini.

<div class='clear'>
</div>
<div class='konten'>6</div>
<div class='konten'>7</div>
<div class='konten'>8</div>
<div class='konten'>9</div>
<div class='konten'>10</div>
<style>
.clear::after {
  content: "";
  clear: both;
  display: table;
  }
</style>
Hasil
1
2
float 3
4
5
6
7
8
9
10

Komentar

Posting Komentar