Mengapa unsur pseudo boleh membersihkan terapung?

Sebab elemen pseudo boleh mengosongkan terapung adalah kerana elemen pseudo boleh mencipta BFC baharu ialah kawasan pemaparan bebas di mana elemen diletakkan mengikut peraturan tertentu. Pseudo-elements ialah penyelesaian ringkas dan fleksibel Dengan mencipta elemen pseudo pada elemen induk bagi elemen terapung dan menetapkannya kepada "display: table;", anda boleh menukar elemen induk kepada BFC. Dengan cara ini, elemen induk boleh mengandungi unsur terapung dan tidak dipengaruhi oleh unsur terapung.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Terapung ialah salah satu teknik reka letak yang biasa digunakan dalam CSS Ia boleh memisahkan elemen daripada aliran dokumen, dengan itu mencapai reka letak berbilang lajur, grafik dan teks bercampur, dsb. Walau bagaimanapun, elemen terapung boleh memberi kesan kepada elemen lain, menjadikannya tidak dapat susun atur dengan betul. Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah apungan jelas. Antaranya, unsur pseudo adalah teknik biasa untuk membersihkan terapung.

Pseudo-element ialah elemen khas dalam CSS yang tidak perlu ditakrifkan dalam HTML, tetapi dicipta dan dikawal melalui pemilih CSS. Elemen pseudo biasa termasuk ::sebelum dan ::selepas. Elemen pseudo ini boleh memasukkan kandungan tambahan sebelum dan selepas kandungan elemen, dan paparan serta reka letak kandungan ini boleh dikawal melalui gaya CSS.

Elemen pseudo mampu mengosongkan terapung kerana ia mencipta BFC (Konteks Pemformatan Blok) baharu. BFC ialah konsep dalam CSS Ia adalah kawasan pemaparan bebas di mana elemen diletakkan mengikut peraturan tertentu. BFC mempunyai ciri-ciri berikut:

1 Elemen dalam BFC disusun secara menegak dan tidak akan bertindih antara satu sama lain walaupun sifat terapungnya berbeza.

2. Elemen dalam BFC tidak akan bertindih dengan elemen terapung, tetapi akan menempati sebanyak mungkin ruang.

3. Elemen dalam BFC tidak akan menjejaskan susun atur elemen luaran, walaupun ia terapung atau melimpahi BFC.

Dengan mencipta elemen pseudo pada elemen induk unsur terapung dan menetapkannya untuk memaparkan: table;, anda boleh menukar elemen induk kepada BFC. Dengan cara ini, elemen induk boleh mengandungi unsur terapung dan tidak dipengaruhi oleh unsur terapung. Kod khusus adalah seperti berikut:

.parent::after {
  content: "";
  display: table;
  clear: both;
}

Dalam kod di atas, ::after pseudo-element dimasukkan selepas kandungan elemen .parent dan ditetapkan untuk memaparkan: table;. Atribut clear: both; digunakan untuk mengosongkan terapung supaya elemen induk dapat dibentangkan secara normal. Dengan cara ini, walaupun elemen .parent mengandungi unsur terapung, ia tidak akan menyebabkan elemen induk runtuh atau melimpah.

Selain menggunakan elemen pseudo untuk mengosongkan terapung, terdapat cara lain untuk mencapai kesan yang sama, seperti menggunakan kelas clearfix atau menetapkan limpahan: tersembunyi atribut kepada elemen induk. Walau bagaimanapun, elemen pseudo ialah penyelesaian ringkas dan fleksibel yang tidak memerlukan penambahan elemen HTML tambahan atau mengubah suai gaya CSS, dan boleh digunakan dengan mudah pada pelbagai senario.

Ringkasnya, unsur pseudo boleh mengosongkan terapung kerana ia boleh mencipta BFC baharu supaya elemen induk boleh mengandungi unsur terapung dan tidak terjejas olehnya. Kesan mengosongkan apungan boleh dicapai dengan memasukkan elemen pseudo pada elemen induk unsur terapung dan menetapkannya kepada paparan: table;. Elemen pseudo ialah penyelesaian ringkas dan fleksibel yang boleh digunakan dengan mudah pada pelbagai senario reka letak.

Atas ialah kandungan terperinci Mengapa unsur pseudo boleh membersihkan terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!