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:

1. ::sebelum: Sisipkan elemen pseudo sebelum kandungan elemen, yang boleh digunakan untuk menambah gaya atau kandungan.
2. ::selepas: Masukkan elemen pseudo selepas kandungan elemen, yang juga boleh digunakan untuk menambah gaya atau kandungan.

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:

1. Cara mengosongkan terapung tidak terhad kepada menggunakan elemen pseudo, tetapi juga boleh menggunakan kaedah lain, seperti menggunakan atribut limpahan, tag kosong, dll.
2. Apabila menggunakan elemen pseudo untuk mengosongkan terapung, anda perlu memberi perhatian kepada keserasian penyemak imbas. Pelayar yang berbeza mempunyai tahap sokongan yang berbeza untuk elemen pseudo Anda boleh menggunakan CSS Hack atau prapemproses CSS untuk menyelesaikan isu keserasian.

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!