Blog Request tutorial? klik disini!

  • Tutorial Mengatasi Permasalahan Float

    Ditulis oleh: Billiyam
    809 kali dibaca
    13 Jul / 2014 18:07

    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






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155