Tutorial Mengatasi Permasalahan Float

Halo Teman-teman kali ini saya akan menulis artikel perbedaan clear:both dan overflow:hidden untuk permasalahan Float. Sebelumnya saya akan jelaskan  apa itu fungsi dari float left  dan float kanan

Float:left;  float left ini sangat mempengaruhi letak pada sebuah content atau sebuah ruang. Jika ada suatu element di beri Float:left maka element itu akan pindah ke Atas sebelah kiri. Karena float adalah mengapung. Dan kemudian Float:right fungsinya sama seperti di atas hanya saja elementnya berpindah keatas sebelah kanan. Kemudian Clear:both berfungsi untuk menghilangkan float yang ada di atasnya. Jika memberikan sebuah div footer makan footer akan naik.  Untuk itu gunakan clear:both pada footer. Dan footer akan kembali ke posisi semula. Perhatikan code, html dan css di bawah ini

See the Pen clear both terhadap float by Dumet_School (@dumet_school) on CodePen.

Kemudian ada ada juga yang menggunakan overflow:hidden tetapi ada perbedaan yang harus kalian amati. jika tidak menggunakan clear:both maka gunakan overflow:hidden di content yang membungkus kedua float tersebut . Perhatikan code, html dan css di bawah ini

See the Pen gjbBF by Dumet_School (@dumet_school) on CodePen.

Pada kedua kasus di atas Perbedaanya adalah jika content di beri warna dan width,  maka untuk yang menggunakan clear:both, footer  akan tetap kembali ke tempat semula tetapi pada jarak kedua float akan tetap kosong tidak ada warna. Sedangkan overflow:hidden mengembalikan si footer ketempat semula tetapi pada jarak antara kedua float tersebut akan ada warna grey