Mengapakah `overflow: auto` Membuat Bekas Berkembang untuk Memasukkan Elemen Terapung?

Mengapa 'overflow: auto' Mengembangkan Ketinggian Bekas untuk Menampung Elemen Terapung?

Apabila melaksanakan reka letak dua lajur dengan elemen terapung, anda mungkin menghadapi masalah di mana bekas tidak mengembang secara menegak agar sesuai dengan anak terapungnya. Menambah 'limpahan: auto' pada bekas menyelesaikan masalah ini.

Memahami Terapung

Elemen terapung diletakkan di luar aliran dokumen biasa, kelihatan terapung di sebelah elemen lain . Oleh itu, bekas induk tidak menyedari kewujudan unsur terapung dan tidak akan mengambil kira ketinggiannya apabila mengira ketinggiannya sendiri.

Kelegaan dan Limpahan

Untuk memaksa bekas induk untuk menampung anak terapungnya, anda perlu sama ada mengosongkan terapung atau mewujudkan konteks pemformatan blok baharu (BFC). Limpahan: auto ialah sifat CSS yang mencipta BFC baharu.

Cara Limpahan: Auto Cipta BFC

Limpahan: auto mewujudkan BFC dengan memenuhi syarat tertentu, termasuk :

• Mencipta blok mengandungi baharu untuk elemen terapung
• Menetapkan sifat 'limpahan' kepada 'auto'

Faedah Penubuhan BFC

Dengan menubuhkan BFC, perkara berikut berlaku:

• Unsur terapung dikekang dalam blok berisi baharu
• Bekas dipaksa untuk mengembang menegak untuk menempatkan anak terapungnya

Nota tentang Clear Floats

Limpahan: auto tidak membersihkan terapung; ia hanya mencipta BFC. Untuk mengosongkan terapung, anda mesti menambah elemen pembersihan, seperti div dengan gaya 'jelas: kedua-duanya', selepas elemen terapung. Walau bagaimanapun, unsur induk tidak boleh membersihkan anak terapungnya sendiri.

Atas ialah kandungan terperinci Mengapakah `overflow: auto` Membuat Bekas Berkembang untuk Memasukkan Elemen Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!