Mengapa Div Ibu Bapa Mempunyai Ketinggian Sifar dengan Anak Terapung?

Memahami Ketinggian Div Ibu Bapa dengan Anak Terapung

Dalam konteks reka bentuk web, ketinggian bekas div boleh dipengaruhi oleh unsur-unsur anaknya. Walau bagaimanapun, apabila elemen kanak-kanak itu diapungkan, tingkah laku yang tidak dijangka boleh berlaku, mengakibatkan div induk dengan ketinggian sifar.

Untuk menggambarkan ini, 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 anda buat HTML menggunakan CSS ini, contohnya:

<div>

Anda mungkin perasan bahawa halaman dipaparkan dengan betul, tetapi apabila anda memeriksa DOM, div "#wrapper" nampaknya mempunyai ketinggian 0px. Ini kerana kandungan terapung mengalihkannya sendiri daripada aliran biasa dokumen, pada asasnya dialih keluar daripada pokok dokumen.

Akibatnya ialah ketinggian div induk tidak dipengaruhi oleh anak terapungnya. Akibatnya, div induk kekal pada ketinggian lalai 0px.

Untuk menyelesaikan isu ini dan memastikan div induk mengembang untuk merangkumi kandungan terapungnya, anda boleh menggunakan sifat "overflow: hidden" pada induk div. Ini mewujudkan "konteks pemformatan blok" baharu yang memaksa kanak-kanak terapung untuk kekal dalam lingkungan ibu bapa.

Berikut ialah CSS yang dikemas kini:

#wrapper {
  width: 75%;
  min-width: 800px;
  overflow: hidden; /* Added */
}

Dengan pengubahsuaian ini, "#wrapper " div kini akan meregangkan agar sesuai dengan kanak-kanak terapungnya, membenarkan reka letak halaman berkelakuan seperti yang diharapkan.

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