Bagaimanakah `overflow: hidden` Mempengaruhi Kedudukan Terapung dalam CSS?

Limpahan CSS:tersembunyi dengan Terapung

Dalam HTML dan CSS, sifat limpahan mengawal gelagat kandungan yang melebihi dimensi bekasnya . Dalam contoh yang disediakan, elemen ul mengandungi senarai elemen li, setiap satu mengandungi tag. Unsur li diapungkan ke kiri, jadi ia biasanya akan muncul bersebelahan antara satu sama lain pada halaman. Walau bagaimanapun, elemen ul mempunyai limpahan: set sifat tersembunyi, yang menimbulkan persoalan tentang cara sifat ini mempengaruhi kedudukan teks.

Limpahan: sifat tersembunyi mewujudkan konteks pemformatan blok (BFC) baharu untuk unsur ul. Ini bermakna kandungan dalam ul dianggap sebagai unit yang berasingan daripada kandungan di luar ul. Akibatnya, teks dalam elemen p yang mengikuti ul ditolak ke bawah ul dan bukannya muncul di sebelah kanannya.

Tingkah laku ini berlaku kerana, dengan limpahan: tersembunyi, elemen ul menjadi BFC. Sebagai elemen peringkat blok, ul mempunyai lebar lalai 100%, yang mengisi keseluruhan lebar bekas induknya. Apabila elemen li terapung melebihi lebar ul, ia diletakkan di dalam BFC dan tidak melimpah di luar.

Dengan menambahkan limpahan: tersembunyi pada elemen ul dan dengan itu mencipta BFC, kami mewujudkan aliran baharu kandungan dalam ul. Ini mengakibatkan teks dalam elemen p ditolak di bawah ul dan bukannya muncul di sebelahnya. Teks secara berkesan "terkandung" dalam ul BFC dan tidak berinteraksi dengan kandungan di sekelilingnya.

Kesimpulan:

Menggunakan limpahan: tersembunyi dengan terapung mencipta blok baharu konteks pemformatan, yang mengubah cara kandungan mengalir dalam bekas. Dengan menghalang kandungan daripada melimpah di luar bekas, ia mempengaruhi kedudukan elemen dan digunakan untuk mencapai pelbagai kesan reka letak.

Atas ialah kandungan terperinci Bagaimanakah `overflow: hidden` Mempengaruhi Kedudukan Terapung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!