Rumah >hujung hadapan web >tutorial css >Mengapakah `limpahan: tersembunyi` Menyebabkan Pertumbuhan Ketinggian Tidak Dijangka dalam Bekas dengan Unsur Terapung?

Mengapakah `limpahan: tersembunyi` Menyebabkan Pertumbuhan Ketinggian Tidak Dijangka dalam Bekas dengan Unsur Terapung?

Linda Hamilton
Linda Hamiltonasal
2024-12-02 12:59:10529semak imbas

Why Does `overflow: hidden` Cause Unexpected Height Growth in Containers with Floated Elements?

Limpahan: Pertumbuhan Ketinggian Tersembunyi dan Tidak Dijangka Elemen Terapung

Soalan:
Apabila limpahan: tersembunyi digunakan pada elemen luar yang mengandungi unsur terapung, mengapa unsur luar berkembang secara tidak dijangka dalam ketinggian untuk mengandunginya?

Jawapan:
Pertumbuhan ketinggian yang tidak dijangka timbul kerana limpahan: tersembunyi mencipta konteks pemformatan blok baharu (BFC). Akar BFC, yang termasuk elemen dengan limpahan yang tidak kelihatan, memanjangkan ketinggiannya untuk menampung terapung jika ia tidak mempunyai ketinggian yang ditentukan.

Mengikut spesifikasi CSS, akar konteks pemformatan blok "stretch to contain terapung mereka mengikut ketinggian jika mereka sendiri tidak mempunyai ketinggian tertentu, lalai kepada auto." Peningkatan ketinggian ini juga terpakai kepada keturunan terapung yang kelebihan margin bawahnya melebihi tepi kandungan bawah akar BFC.

Perbezaan daripada Membersihkan Terapung
Perhatikan bahawa tingkah laku ini berbeza daripada kelegaan apungan, yang hanya berlaku apabila harta jelas digunakan dan terdapat apungan terdahulu untuk dibersihkan. Dalam kes ini:

  • Menggunakan clear: kedua-duanya pada elemen di luar akar BFC membersihkan terapung tetapi tidak menyebabkan elemen luar meregang.
  • Meletakkan elemen ketinggian sifar dengan jelas: kedua-duanya di dalam akar BFC memastikan elemen luar terbentang ke bawah untuk menampung tepi bawah unsur terapung (dikenali sebagai "pembetulan jelas").

Atas ialah kandungan terperinci Mengapakah `limpahan: tersembunyi` Menyebabkan Pertumbuhan Ketinggian Tidak Dijangka dalam Bekas dengan Unsur Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn