Adakah terdapat sebarang cara untuk membersihkan terapung?

Apakah kaedah untuk mengosongkan apungan? Walau bagaimanapun, masalah yang sering dihadapi apabila menggunakan reka letak terapung ialah elemen induk tidak dapat membalut elemen terapung dengan betul, menyebabkan halaman mempunyai reka letak yang tidak teratur. Oleh itu, kita perlu mengambil langkah untuk membersihkan terapung supaya elemen induk dapat membalut elemen terapung dengan betul.

Terdapat banyak cara untuk mengosongkan terapung berikut akan memperkenalkan beberapa kaedah yang biasa digunakan dan memberikan contoh kod khusus.

Gunakan teknik clearfix

1. clearfix ialah kaedah yang biasa digunakan untuk membersihkan terapung. Ia menambah kelas clearfix pada elemen induk dan menggunakan elemen pseudo::after untuk mengosongkan apungan. Berikut ialah contoh kod khusus:

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="clearfix">
  <div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
  <div style="float: left; width: 50px; height: 50px; background-color: green;"></div>
</div>

Dalam kod di atas, kami menambah kelas clearfix pada div elemen induk dan menetapkan gaya clearfix::after. Ini mengosongkan apungan supaya elemen induk membalut elemen terapung dengan betul.

Menggunakan atribut limpahan

2. Satu lagi kaedah yang biasa digunakan untuk mengosongkan terapung ialah menggunakan atribut limpahan. Dengan menambahkan atribut limpahan pada elemen induk, anda boleh mencetuskan BFC (konteks pemformatan peringkat blok), dengan itu mengosongkan apungan. Berikut ialah contoh kod khusus:

<style>
.overflow-clearfix {
  overflow: hidden;
}
</style>

<div class="overflow-clearfix">
  <div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
  <div style="float: left; width: 50px; height: 50px; background-color: green;"></div>
</div>

Dalam kod di atas, kami menambahkan limpahan: atribut tersembunyi pada div elemen induk, supaya apungan boleh dikosongkan dan elemen induk boleh membalut elemen terapung dengan betul.

Gunakan clearfix pseudo-class

3. Selain daripada teknik clearfix dan atribut limpahan, anda juga boleh menggunakan clearfix pseudo-class untuk mengosongkan terapung. Berikut ialah contoh kod khusus:

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>

<div class="clearfix">
  <div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
  <div style="float: left; width: 50px; height: 50px; background-color: green;"></div>
</div>

Dalam kod di atas, kami menambah kelas clearfix pada div elemen induk dan menetapkan gaya clearfix::after. Pada masa yang sama, untuk serasi dengan versi pelayar IE yang lebih rendah, kami turut menambah gaya zum: 1 untuk membetulkan. Ini mengosongkan apungan supaya elemen induk membalut elemen terapung dengan betul.

Ringkasan

Mengosongkan terapung ialah masalah biasa yang dihadapi dalam reka letak halaman web Dengan menguasai beberapa kaedah biasa membersihkan terapung, anda boleh mengelakkan kekeliruan reka letak. Artikel ini memperkenalkan kaedah mengosongkan terapung menggunakan teknik clearfix, atribut limpahan dan kelas pseudo clearfix serta memberikan contoh kod khusus. Saya harap pembaca dapat menyelesaikan masalah yang disebabkan oleh susun atur terapung melalui kaedah ini.

Atas ialah kandungan terperinci Adakah terdapat sebarang cara untuk membersihkan terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!