Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengosongkan unsur pseudo terapung
Cara mengosongkan terapung dan kod sampel unsur pseudo
Pengenalan:
Dalam pembangunan bahagian hadapan, apungan (float) ialah kaedah susun atur yang biasa digunakan. Walau bagaimanapun, unsur terapung boleh menyebabkan ketinggian unsur induk runtuh, menyebabkan kekeliruan reka letak. Untuk mengelakkan masalah ini, kita boleh menggunakan elemen pseudo untuk mengosongkan terapung.
Apakah unsur pseudo?
Pseudo-element ialah elemen baharu dalam CSS3 yang boleh menambah gaya pada elemen dalam dokumen tanpa benar-benar menambah elemen tambahan pada HTML.
Unsur pseudo terutamanya terdapat dalam dua bentuk:
Bagaimana untuk mengosongkan terapung menggunakan unsur pseudo?
Dalam proses menggunakan elemen pseudo untuk mengosongkan terapung, kita perlu menggunakan atribut kandungan CSS untuk menentukan kandungan elemen pseudo sebagai kosong, dan kemudian mencetuskan BFC dengan menetapkan atribut paparan pada elemen pseudo kepada jadual, jadual -baris atau sel jadual (konteks pemformatan peringkat blok).
Berikut ialah beberapa contoh kod:
<style> .clearfix::after { content: ""; display: table; clear: both; } .float-left { float: left; } .float-right { float: right; } </style> <div class="clearfix"> <div class="float-left">左浮动元素</div> <div class="float-right">右浮动元素</div> </div>
Dalam kod sampel di atas, kami mencipta kelas clearfix, dan kemudian menetapkan kandungannya dalam ::after pseudo-element kepada rentetan kosong, atribut paparan ke jadual dan clear atribut kepada kedua-duanya. Dalam struktur HTML, kami menggunakan elemen terapung kiri dan terapung kanan dan kemudian membungkusnya dalam bekas clearfix.
Dengan cara ini, elemen pseudo tanpa kandungan sebenar ditambah selepas bekas clearfix Memandangkan atribut paparan elemen pseudo ialah jadual, BFC akan dicetuskan, sekali gus mewujudkan konteks pemformatan peringkat blok baharu. Ini membersihkan terapung dan mengelakkan isu keruntuhan ketinggian bekas.
Nota:
Ringkasan:
Dengan menggunakan elemen pseudo untuk mengosongkan terapung, kita boleh mengelakkan masalah ketinggian runtuh unsur induk yang disebabkan oleh unsur terapung dan memastikan kebolehselenggaraan dan kebolehbacaan kod. Dalam pembangunan sebenar, kaedah terapung yang berbeza boleh dipilih mengikut keadaan tertentu untuk mencapai kesan terbaik.
Atas ialah kandungan terperinci Bagaimana untuk mengosongkan unsur pseudo terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!