Mengapa Menetapkan Limpahan kepada Apa-apa Tetapi 'Kelihatan' Mencipta Konteks Pemformatan Blok Baharu dalam CSS2.1?

Mengapa CSS2.1 Mentakrifkan Nilai Limpahan Selain "Kelihatan" untuk Mewujudkan Konteks Pemformatan Blok Baharu?

Dalam CSS2.1, nilai limpahan kecuali untuk "terlihat " ditentukan untuk mewujudkan konteks pemformatan blok baharu (BFC). Ini boleh membingungkan kerana tujuan limpahan adalah untuk menyembunyikan limpahan tanpa menjejaskan reka letak.

Setelah mendalami isu ini, ternyata bahawa nilai limpahan selain daripada "kelihatan" terdiri daripada dua ciri yang kelihatan tidak berkaitan: penciptaan dan limpahan BFC bersembunyi. Walau bagaimanapun, seperti yang ditunjukkan dalam sejarah, apungan boleh melangkaui elemen induknya, justeru menyembunyikan limpahan masuk akal tanpa mengubah reka letak.

Sebab Keputusan

Rasional di sebalik ini keputusan berpunca terutamanya daripada menatal kandungan. Seperti dalam senarai mel Kumpulan Kerja CSS:

"Jika spesifikasi tidak menyatakan ini, terapung yang bersilang dengan kandungan boleh tatal memerlukan penyemak imbas untuk terus membalut semula kandungan boleh tatal (sekitar terapung yang menceroboh) semasa menatal. Ini akan menyebabkan mahal dari segi pengiraan dan memudaratkan prestasi menatal."

How It Berfungsi

Pertimbangkan senario berikut: Dua kotak ketinggian tetap dengan limpahan ditetapkan kepada "kelihatan", di mana kotak pertama mengandungi apungan yang melampaui ketinggian induk:

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

Apabila limpahan dikekalkan sebagai "kelihatan", tiada isu kerana kandungan tidak tertakluk kepada penatalan. Walau bagaimanapun, apabila limpahan ditetapkan kepada nilai selain daripada "kelihatan", kandungan menjadi kedua-duanya dipotong mengikut sempadan kotak dan boleh ditatal. Jika kotak kedua mempunyai limpahan: auto, ia akan menyerupai ini:

[Imej dua kotak ketinggian tetap dengan limpahan: auto]

Memandangkan apungan menghalang penatalan, penyemak imbas mesti membungkus semula kandungan untuk memastikan ia kekal kelihatan. Mengulangi proses ini setiap kali kandungan mengecat semula semasa menatal boleh menjejaskan prestasi.

Ketekalan dan Tatal Tersembunyi

Satu lagi tanggapan salah yang nyata ialah bekas dengan limpahan: tersembunyi hanya menyembunyikan kandungan dan tidak boleh ditatal. Walaupun tiada antara muka pengguna untuk menatal, anda masih boleh menatal kandungan secara pemrograman dengan melaraskan sifat scrollTop. Walaupun dalam kes ini, kandungan perlu dibalut semula untuk mengelakkan kekaburan terapung.

Oleh itu, sebarang nilai limpahan selain daripada "kelihatan" menghasilkan BFC untuk tujuan ketekalan.

Perubahan dalam CSS2.1

Dalam CSS2.1, kemasukan BFC untuk limpahan nilai selain daripada "kelihatan" membawa kepada perubahan dalam cara elemen berinteraksi dengan terapung:

• Keseluruhan kotak dengan limpahan ditolak ke tepi daripada terapung, kerana ia menghasilkan BFC yang merangkumi kandungannya.
• Kotak dengan ketinggian: auto dan BFC akan meregang secara menegak untuk menampung terapung, bukannya hanya sesuai dengan aliran masuk mereka kandungan.

Ringkasan

Keputusan untuk memautkan penciptaan BFC kepada nilai limpahan selain daripada "kelihatan" terutamanya didorong oleh pertimbangan prestasi dan untuk memastikan konsistensi dengan pemprograman menatal. Walaupun tingkah laku yang kelihatan bercanggah, ia berfungsi untuk mengekalkan integriti reka letak dan menatal dalam senario kompleks yang melibatkan apungan.

Atas ialah kandungan terperinci Mengapa Menetapkan Limpahan kepada Apa-apa Tetapi 'Kelihatan' Mencipta Konteks Pemformatan Blok Baharu dalam CSS2.1?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!