Tutorial Mengatasi Permasalahan Float

13/07/2014    Billiyam    924     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More