Mengapa Bekas Induk Saya Mempunyai 0 Ketinggian Apabila Saya Mengapungkan Anaknya?

Kandungan Terapung dan Kekeliruan Ketinggian Bekas

Dalam CSS, elemen terapung diletakkan di luar aliran dokumen biasa dan tidak menjejaskan ketinggiannya bekas induk. Tingkah laku ini mungkin kelihatan berlawanan dengan intuisi, terutamanya apabila halaman dipaparkan dengan betul.

Memahami Isu

Pertimbangkan CSS berikut:

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

Apabila Struktur HTML seperti ini dicipta:

<div>

Halaman akan dipaparkan dengan betul, tetapi setelah diperiksa, div#wrapper induk akan menunjukkan ketinggian 0px. Ini berlaku kerana kandungan terapung, seperti .content dan .lbar, dialih keluar daripada aliran biasa dan menduduki kedudukan di luar mana-mana kandungan blok.

Menyelesaikan Isu Ketinggian

Untuk memastikan bekas induk mengembang ke ketinggian kandungan terapungnya, terdapat dua perkara utama teknik:

• Limpahan: Tersembunyi: Limpahan tetapan: tersembunyi pada elemen kontena mewujudkan konteks pemformatan blok baharu, yang memaksa bekas mengambil kira ketinggian anak terapungnya .
• Mengandungi Terapung: Kaedah lain untuk mengandungi terapung wujud, seperti menggunakan blok sebaris, elemen pseudo dan membungkus elemen terapung dalam bekas lain.

Memahami aspek reka letak CSS ini adalah penting untuk mencipta halaman web dengan saiz dan aliran yang tepat.

Atas ialah kandungan terperinci Mengapa Bekas Induk Saya Mempunyai 0 Ketinggian Apabila Saya Mengapungkan Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!