CSSMateri CourseNusantech Academy

Modul 3-9 CSS Float

By 20 Mei 2020 Juni 3rd, 2020 No Comments

Halo teman-teman, kita ketemu lagi dalam course HTML & CSS Nusantech Academy. Pada pembahasan sebelumnya kita berhasil mengenal apa itu Property Display dan Position. Masih pada topik yang sama kita akan belajar mengenai Float. Apa itu float dan apa kegunaannya? Simak selengkapnya disini.

Apa itu Float

Float secara bahasa memiliki arti ‘mengambang’. Property Float digunakan untuk mengatur layout dengan membuat sebuah elemen berada di kiri atau kanan sebuah Container.

Float diidentikkan dengan penggunaannya terhadap gambar yang dibuat menyatu dengan paragraf seperti artikel-artikel di koran, majalah atau text wrapping dalam aplikasi pengolah kata. Sebenarnya bukan hanya itu saja kegunaan dari Float, Property ini juga bisa digunakan untuk mengatur posisi elemen-elemen lain, membuat sidebar dsb.

Nilai Float

Mungkin lebih mudah jika kita lihat langsung contoh penggunaannya seperti berikut ini:

Kode HTML:

<body>
<img class="float-image" src="./nusantech.png"/>
    <p class="float-container">
PT. Solusi Teknologi Nusantara (Nusantech) is a company that focuses on information technology services and research. We offer our solutions to help your organization, and we are also provide customized solution based on your needs. We are glad to work with many clients who grow together with us
</p>
</body>
  • Float: left

Membuat elemen berada di kiri Container

Kode CSS:

float-container{
    border: 10px dotted red;
    padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: left;
}

Hasil:

  • Float: right

Elemen akan berada di kanan Container

Kode CSS:

.float-container{
    border: 10px dotted red;
    padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: right;
}

Hasil:

  • Float: none

Float: none digunakan untuk meniadakan nilai Float. Ini adalah nilai default dari semua elemen.

Kode CSS:

.float-container{
    border: 10px dotted red;
    padding: 20px;
}
.float-image {
width: 50%;
margin: 50px;
float: none;
}

Hasil:

Pasangan Float

Float punya pasangan?

Yups, pasangan dari Float adalah Property Clear. Property ini digunakan untuk menetralkan elemen yang tidak ingin terdampak oleh efek Float. 

Misalkan kita punya kasus seperti ini.

Kita  mengatur layout kita menggunakan Float. Di layout kita terdapat 2 elemen utama penyusun layout, yakni konten utama di kiri (float: left) dan sidebar di kanan (float: right).

Kemudian kita menginginkan elemen tambahan agar lebih menarik. Mungkin Footer di bawah kedua elemen tersebut? Bukan ide buruk.

Tapi kemudian kita menyadari bahwa hasilnya tidak sesuai ekspektasi kita seperti gambar di bawah.

 Kenapa bisa begitu? 

Ingat sifat Float yang menyesuaikan elemen seperti contoh sebelumnya? Inilah saatnya kita menggunakan Property Clear untuk mengatasi masalah seperti ini.

Kode CSS:

.footer {
text-align: center;
clear: both;
}

Dari gambar di atas dapat kita simpulkan bahwa Property Clear dapat menetralkan elemen dengan membuat blok sendiri di bawah kedua elemen Float tadi.

Ada beberapa nilai lain dari Property Clear

  • Clear: right

Menetralkan efek Float di sebelah kanan.

  • Clear: left

Menetralkan efek Float di sebelah kiri.

  • Clear: both

Seperti pada kasus yang baru dibahas, menetralkan elemen dari efek Float di kedua sisi.

  • Clear: none

Clear None adalah nilai default ketika kita menggunakan Float. nilai Property ini tidak menetralkan elemen dari efek Float.

Penutup

Sekian dulu mengenai pembahasan kali ini. Pada pembahasan berikutnya kita akan belajar mengenai apa itu Overflow. Jika ada pertanyaan atau saran silahkan isi kolom komentar ya!

See you next time!

Leave a Reply