Dalam hal ini kita akan berbicara tentang dua masalah yang lebih umum ketika menggunakan properti float untuk membuat tata letak Anda.
Bagi Anda yang baru mengenal CSS, Float adalah properti CSS yang memungkinkan Anda untuk menyelaraskan elemen Anda, seperti DIV, untuk membuat tata letak situs web. Nilai untuk Float termasuk Kiri, Kanan dan Tidak Ada. Anda dapat menggunakan Mengapung untuk menyelaraskan elemen dan jika dilakukan dengan benar Anda dapat melakukannya sedemikian rupa sehingga dinamis - hampir cair.
Katakanlah Anda perlu membuat galeri gambar. Ide Anda adalah menempatkan 4 gambar di setiap baris, tetapi setelah Anda menempatkan gambar pertama gambar kedua pergi ke baris berikutnya.
Trik CSS: Masalah CSS Terpecahkan
Saya akui di masa lalu saya dulu menggunakan nilai negatif untuk menyelaraskan gambar saya sehingga gambar kedua akan muncul di sebelah yang pertama menggunakan properti margin-kiri, kanan, atas, bawah. Saya bahkan mempertimbangkan menggunakan tabel, tetapi memilih untuk menggunakan nilai negatif. Tidak ada yang salah dengan menggunakan properti margin negatif, tetapi tidak ketika ada solusi yang lebih baik untuk itu, seperti menggunakan pelampung.
Jika Anda menerapkan Float ke gambar-gambar itu maka mereka akan menyelaraskan dalam satu baris, maka Anda dapat terus menambahkan lebih banyak gambar menggunakan properti float dan Anda tidak perlu khawatir tentang apakah mereka akan berbaris atau tidak karena properti float akan mengenali bahwa ada terlalu banyak elemen pada baris ini dan itu akan mendorong gambar ke baris berikutnya.
Tetapi bagaimana jika Anda menggunakan Mengapung untuk tata letak situs web Anda, untuk divs Anda dan bukan hanya gambar.
Ada 2 masalah utama yang akan Anda hadapi dengan Mengapung.
Katakanlah Anda memiliki tiga elemen. Parent1 (wadah utama situs web), Child1 (bilah navigasi kiri), dan Child2 (area konten). Parent1 adalah wadah div utama dan tujuan Anda adalah untuk mengapung divs anak secara berdampingan seperti memiliki area navigasi kiri dan area konten yang tepat. Kedengarannya bagus.
Anda telah mengatur tinggi badan parent1 Anda ke otomatis, dan Anda telah menetapkan tinggi child1 dan child2 sebagai otomatis. Tetapi begitu Anda membuka dan melihatnya di halaman web, tinggi elemen induk hanya 1 atau 2 piksel, elemen anak tampaknya terlihat melayang di atas wadah induk, dan wadah induk tampaknya tidak mengenali div itu. tinggi. (lihat tautan tes 1 di situs web).
Jangan khawatir, berikut ini solusi mudahnya.
Tambahkan overflow: otomatis; untuk CSS dari wadah induk dan itu akan secara otomatis mengenali mengapung dan akan bertambah tinggi sehingga tampak bahwa pelampung adalah bagian dari wadah induk seperti yang Anda inginkan. Wow semua itu dalam satu baris.
Tapi jangan lupa masih ada satu masalah Float lagi.
Masalah kedua lebih merupakan masalah kompatibilitas lintas browser dengan float, tetapi masih sama pentingnya. Jika Anda mencoba Float untuk contoh: tiga gambar di sebelah kiri dan menggunakan properti margin, maka kadang-kadang wadah pertama yang mengapung akan menggandakan margin di Internet Explorer.
Selamat datang di Float Peekaboo Bug / IE Float Doubled Bug Margin Bug.
Itu benar jika Anda telah mencoba untuk melayang elemen dan menggunakan segala jenis margin maka Anda akan melihat bahwa itu akan menggandakan margin di IE.
Saya yakin ada beberapa peretasan yang layak, tetapi ada cara mudah untuk memperbaikinya dalam CSS. Pembunuh Margin Float. Dalam CSS untuk wadah itu tambahkan tampilan: inline Saya tidak tahu mengapa tetapi karena alasan tertentu properti ini tampaknya memperbaiki properti margin ganda.
Itu dia? Ya itu saja. Sekarang Anda dapat mulai menggunakan pelampung.