Menurut spesifikasi CSS, float dipindahkan keluar dari aliran dokumen dan tidak mempengaruhi tata letak kotak blok tetapi hanya susunan kotak sebaris (biasanya teks). Oleh karena itu, ketika tingginya melebihi wadah yang menampungnya, wadah induk umum tidak akan secara otomatis meregang untuk menutup elemen mengambang. Namun terkadang kita membutuhkan perilaku penutupan otomatis ini.
Salah satu cara untuk melakukannya adalah dengan memasukkan label tambahan ke dalam wadah induk dan memperjelas perluasan wadah induk. Cara ini memiliki kompatibilitas browser yang baik dan tidak ada masalah, kekurangannya adalah memerlukan tag tambahan (dan biasanya tidak semantik), jadi saya pribadi tidak menyukainya.
Kemudian, ada cara baru, menggunakan :after pseudo-class untuk menyematkan elemen secara dinamis untuk membersihkan float. Metode ini memiliki prinsip yang sama dengan yang sebelumnya, kecuali bahwa konten tambahan dihasilkan dengan CSS, tetapi pertimbangkan IE tidak dukungan :setelah dan harus melakukan banyak peretasan. Metode ini memiliki kompatibilitas umum, namun dapat menangani browser yang berbeda melalui berbagai peretasan. Pada saat yang sama, metode ini dapat memastikan bahwa html relatif bersih, sehingga masih lebih sering digunakan.
Belakangan, seseorang menemukan bahwa menyetel overflow wadah induk ke nilai selain yang terlihat dapat menutup elemen mengambang di browser yang sesuai standar. Tentu saja, IE tidak mendukungnya, jadi metode ini sama validnya dengan metode sebelumnya melakukan pemrosesan yang berbeda (khususnya memicu tata letak). Perbedaannya adalah bahwa overflow tidak merepotkan seperti kelas semu :after. Ia juga memiliki kekurangan.
Sebelum menggunakan overflow, ada cara lain untuk menggunakan float, yaitu dengan membuat container induk mengapung. Ini memanfaatkan karakteristik elemen mengambang - elemen mengambang akan menutup elemen mengambang. Metode ini memiliki hasil yang baik di IE/Win dan browser yang kompatibel dengan standar, tetapi kerugiannya juga jelas - wadah induk mungkin tidak mengapung hanya karena ingin mengapung. Bagaimanapun, mengambang adalah perilaku khusus, dan terkadang tata letaknya tidak benar. Membiarkannya mengapung juga normal. Meskipun elemen float dapat ditutup di IE dan browser yang memenuhi standar, prinsipnya berbeda. Di IE/Win, float memicu tata letak dan karenanya menutup float. Di browser yang memenuhi standar, float sebenarnya sama dengan yang sebelumnya prinsip overflow dalam metode ini adalah sama, menghasilkan "rentang pemformatan tingkat blok" - ini adalah fenomena yang disebutkan dalam spesifikasi CSS. Seringkali memiliki independensi. Salah satu karakteristiknya adalah ia akan menutup float internal secara otomatis .
Berdasarkan spesifikasi, tipe elemen berikut menghasilkan cakupan pemformatan tingkat blok:
● Elemen mengambang dapat berada di kiri atau kanan.
● Elemen yang diposisikan secara mutlak.
● Elemen blok sebaris, namun tokek ini saat ini tidak mendukungnya.
● elemen tipe sel tabel. Faktanya, tabel, grup kepala tabel, baris tabel, dll. juga dapat diterima, begitu juga dengan tabel sebaris (tidak didukung oleh tokek), karena semuanya secara tidak langsung menghasilkan tabel anonim. sel.
● Overflow adalah elemen yang nilainya tidak terlihat.
Oleh karena itu, ternyata di browser yang memenuhi standar, kita juga dapat memiliki begitu banyak metode untuk menutup elemen mengambang, dan hanya diperlukan CSS, tidak diperlukan lagi. Ngomong-ngomong, selain overflow, hal di atas memiliki efek tambahan yaitu otomatis menyusutkan lebar container induk.
Untuk IE/Win memiliki sistemnya sendiri yaitu layout. Elemen dengan layout akan secara otomatis menutup elemen mengambang. Mari kita lihat properti CSS yang memicu layout rentang di atas. :
● Elemen mengambang ● Elemen yang diposisikan sepenuhnya ● tampilan:blok sebaris
● memperbesar
● lebar/tinggi
● overflow/overflow-x/overflow-y [Baru di IE7]
● maks/min-lebar/tinggi [Baru di IE7]
Dari penjelasan di atas, ada banyak cara untuk menutup elemen mengambang di IE, dan tentu saja semuanya memiliki keterbatasan. Mereka memiliki efek samping atau menggunakan atribut non-standar (yang tidak dapat lolos verifikasi).
Hal lain yang perlu disebutkan adalah display:inline-block. Atribut ini sendiri tidak berguna untuk IE. Efek sebenarnya hanya menambahkan tata letak ke suatu elemen secara diam-diam. Namun, browser yang memenuhi standar mengenali atribut ini, sehingga tidak memengaruhinya Untuk browser, Anda perlu mengatur tampilan kembali ke default. Ada bug di IE di sini. Jika Anda mendefinisikan display:inline-block terlebih dahulu, dan kemudian mengatur tampilan kembali ke blok (kedua tampilan ini harus ditempatkan dalam dua pernyataan CSS satu demi satu agar memiliki efek), maka tata letaknya akan berubah. tidak hilang, dan pada saat yang sama, tata letak tidak akan hilang. Ini tidak akan mempengaruhi browser lain, jadi untuk saat ini, ini juga merupakan cara yang baik untuk memicu tata letak:
| .gainlayout{display:inline-block;} .gainlayout{display:block;} |
Oleh karena itu, ada banyak cara untuk menutup elemen mengambang di browser. Cara menggunakan properti CSS ini bersama-sama memerlukan analisis mendetail tentang situasi spesifik. Kita juga perlu menerapkan komentar bersyarat secara fleksibel kembali dan gunakan bening. Dapat digunakan.