Mengapa Div Ibu Bapa Runtuh kepada Ketinggian Sifar Apabila Anak-anaknya Terapung?

Memahami Ketinggian Div Ibu Bapa Sifar dengan Anak Terapung

Dalam CSS, apabila div mengandungi anak terapung, ia kadangkala boleh mengakibatkan div induk mempunyai ketinggian sifar. Fenomena ini mungkin kelihatan membingungkan, memandangkan kandungan dipaparkan dengan betul pada halaman.

Penjelasan terletak pada model reka letak CSS. Kandungan terapung, seperti div ".content" dan ".lbar" dalam contoh HTML yang disediakan, dialih keluar daripada aliran biasa dokumen dan diletakkan bersama kandungan yang mengikutinya. Ini bermakna kandungan terapung tidak lagi mempengaruhi ketinggian div bekasnya.

Jika tiada kandungan tidak terapung, div induk ("#wrapper") tidak mengandungi unsur yang menyumbang kepada ketinggiannya. Akibatnya, ia runtuh ke ketinggian 0px, walaupun anak-anaknya muncul pada halaman.

Untuk menangani isu ini dan memastikan div induk kekal kelihatan, pembangun boleh menggunakan teknik seperti:

• Limpahan Penyembunyian: Tetapan "overflow: hidden" pada div induk mewujudkan konteks pemformatan blok baharu, memaksa div itu mengandungi anak terapungnya dan mengekalkan ketinggian bukan sifar.
• Kandungan Tidak Terapung: Menambah kandungan tidak terapung, seperti nod teks atau elemen jelas, dalam div induk membolehkan div menetapkan ketinggian berdasarkan kandungan tersebut.

Memahami gelagat ini menghalang kekecewaan dan membolehkan pembangun mencipta reka letak yang diingini dengan berkesan tanpa isu ketinggian yang tidak dijangka.

Atas ialah kandungan terperinci Mengapa Div Ibu Bapa Runtuh kepada Ketinggian Sifar Apabila Anak-anaknya Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!