Cara menggunakan CSS float

Properti float pada CSS digunakan untuk mengatur elemen agar bisa mengapung ke kiri atau ke kanan, in

Kegunaan CSS float

Properti float pada CSS digunakan untuk mengatur elemen agar bisa “float atau mengapung” ke kiri atau ke kanan. Css float sangat berguna untuk mengatur design tata letak pada halaman web.

Elemen yang mempunyai position: absolute; tidak akan bekerja jika diberi style dengan properti float, karena elemen “mengapung” sudah dikeluarkan dari aliran normal.

Jika beberapa elemen “float atau mengapung” ditempatkan bersebelahan, maka elemen yang lainnya akan ikut “mengapung” bersebelahan mengisi ruang horizontal yang tersisa.

Jika tidak ada cukup ruang untuk “mengapung”, itu akan digeser ke bawah sampai tidak ada lagi elemen “mengapung” tersisa. Kemungkinan nilai untuk properti ini adalah:

  • left – mengapung ke kiri
  • right – mengapung ke kanan
  • none – Unsur tidak mengapung. Ini adalah default
  • inherit – Unsur mewarisi nilai mengapung dari induknya

Berikut gambaran CSS float:

Float right

Dengan porperti float Anda bisa menggunakannya untuk elemen agar “ngefloat atau mengapung” ke arah kanan dengan nilai right.

img {
    float: right;
}

Float left

Dengan porperti float Anda bisa menggunakannya untuk elemen agar “ngefloat atau mengapung” ke arah kanan dengan nilai left.

img {
    float: left;
}

Mematikan properti float

Jika beberapa elemen “float atau mengapung” ditempatkan bersebelahan, maka elemen yang lainnya akan ikut “mengapung” bersebelahan mengisi ruang horizontal yang tersisa.

Dengan properti clear Anda bisa mengatur menspesifikasikan elemen yang ikut mengapung apakah diperbolehkan atau tidak diperbolehkan (matikan).

Kemungkinan nilai properti  clear adalah:

  • none – Memungkinkan elemen mengapung di kedua sisi. Ini adalah default
  • left – Tidak diperbolehkan elemen mengapung ke sisi kiri
  • right – Tidak diperbolehkan elemen mengapung ke sisi kanan
  • both – Tidak diperbolehkan elemen mengapung di kedua sisi kiri atau sisi kanan
  • inherit – Unsur mewarisi nilai dari elemen induknya
#box6 {
    clear: left;
}

Pada contoh diatas box yang bernomor 6 tidak mengapung ke sisi kiri mengikuti elemen yang lainnya, dikarenakan sudah diberi style clear: left;

Clearfix

Jika Anda menggunakan properti float dan didalamnya ada elemen yang lebih tinggi dari elemen pembungkusnya. Maka Anda akan mendapatkan masalah, dimana elemen itu akan ke luar dari wadah.

#clearfix {
    overflow: auto;
}

Seperti pada contoh diatas Anda mengatasinya dengan properti overflow: auto; agar elemen pembungkusnya bisa menampungnya. Properti overflow: auto; bekerja dengan baik selama Anda dapat mengontrol margin dan padding, jika tidak Anda mungkin akan melihat scrollbar.

Dengan clearfix yang lebih modern akan lebih aman digunakan dan kode berikut digunakan untuk sebagian besar halaman web:

#clearfix::after {
    content: ” “;
    clear: both;
    display: table;
}

Membuat navigasi sederhana

Anda bisa memanfaatkan properti float untuk membuat menu navigasi sederhana secara horizontal.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2194e3;
}
li {
    float: left;
}
li a {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    padding: 17px 15px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}

Membuat layout sederhana

Anda bisa memanfaatkan properti float untuk membuat layout sederhana.


#container {
    text-align: center;
    color: #ffffff;
    font-size: 22px;
}
#header {
    height: 100px;
    background-color: grey;
}
#content {
    width: 75%;
    height: 250px;
    background-color: green;
    float: left;
}
#sidebar {
    width: 25%;
    height: 250px;
    background-color: blue;
    float: right;
}
#footer {
    height: 50px;
    background-color: grey;
    clear: both;
}