Trik CSS: menutup wadah induk setelah elemen anak diapungkan

Dalam dua bulan terakhir, saya sesekali bekerja sebagai seniman di beberapa situs web. Dalam prosesnya, saya memperoleh pemahaman yang lebih baik tentang pengembangan standar DIV+Css. Ada dua hal yang paling memberi saya manfaat. Pertama, saya benar-benar memahami Model Kotak CSS, dan yang lainnya adalah saya memecahkan masalah "elemen mengambang tertutup" yang telah lama mengganggu saya:

Secara umum, jika elemen anak menggunakan float, elemen induk tidak selalu dapat mengetahui secara pasti di mana elemen anak berakhir, sehingga batas bawah elemen induk selalu melewati bagian tengah atau bahkan atas elemen anak, sehingga terlihat sangat tidak nyaman.

Pada awalnya, saya menambahkan
atau

setelah elemen anak dan mengatur atributnya menjadi "clear:all;", tetapi ini akan memerlukan banyak ruang yang tidak berguna. Tag, dan bahkan beberapa situs web perlu mengubah kode ASP untuk secara otomatis menambahkan tag kosong ini, yang hanya dapat dianggap sebagai upaya terakhir.

Belakangan, saya menemukan bahwa ketika tag induk juga disetel ke float, tag tersebut dapat ditutup pada posisi yang benar, jadi saya mengapungkan tag induk dengan mudah. ​​Dengan cara ini, banyak kode ASP yang tidak perlu diubah perlunya menambahkan atribut Clear Jika tag kosong tidak dapat ditambahkan dari template tetapi perlu ditambahkan dari kode ASP, tidak perlu mengubah kode ASP. Anda hanya perlu mengatur wadah induk menjadi mengambang masih perlu mengubah ASP, lalu mengubah wadah induk. Pengaturan wadah induk menjadi mengambang dan mengambang lapis demi lapis akan selalu menyelesaikan masalah. Meskipun hal ini dapat menghemat banyak masalah, hal ini dapat dengan mudah menyebabkan seluruh halaman dipenuhi elemen mengambang, -_-!!! Ini hanya dapat dianggap sebagai strategi tengah.

Kemudian, ketika saya sedang mencari hal lain di Internet, saya tidak sengaja menemukan seseorang yang mengatakan bahwa menambahkan dua properti berikut ke properti CSS dari wadah induk saja akan menyelesaikan masalah:

meluap: otomatis;

_tinggi: 1%;

Saya mencobanya, dan berhasil dengan sangat baik. Dengan cara ini, ini harus dianggap sebagai cara terbaik untuk menyelesaikan masalah ini saat ini: tidak perlu mengubah tugas halaman, dan pada dasarnya tidak perlu mengubah induknya. container - bahkan penampung induk dari penampung induk. Jika Anda membuat perubahan apa pun, cukup tambahkan dua atribut yang berbeda ke penampung induk dan selesai.