Beberapa cara untuk mengosongkan terapung dalam css

Beberapa kaedah mengosongkan terapung dalam CSS

Dalam CSS, elemen terapung ialah kaedah reka letak yang kerap digunakan, tetapi elemen terapung juga boleh menyebabkan masalah seperti keruntuhan ketinggian unsur induk dan limpahan elemen anak, jadi Anda perlu menggunakan kaedah membersihkan terapung.

Yang berikut memperkenalkan beberapa kaedah praktikal untuk membersihkan terapung:

1 Gunakan atribut jelas

Atribut jelas boleh menetapkan keadaan terapung unsur pilihan: Nilai:

1. jelas: tiada (nilai lalai) bermakna elemen tidak mengosongkan apungan;
2. jelas: kiri bermaksud elemen terapung kiri tidak dibenarkan di bawah elemen, iaitu, apungan kiri dikosongkan; : kedua-duanya bermakna tiada unsur terapung dibenarkan di bawah elemen, iaitu apungan kiri dan kanan dikosongkan pada masa yang sama; 🎜>

   <div class="parent">
     <div class="child left"></div>
     <div class="child right"></div>
     <div style="clear:both;"></div>
   </div>

Dalam kod di atas, kami menambah teg div kosong pada baris terakhir, dan kemudian menetapkan gayanya Nilai atribut yang jelas ialah kedua-duanya Memandangkan lebar dan ketinggian elemen ini tidak ditetapkan, ia hanyalah satu label kosong, jadi ia tidak akan menjejaskan reka letak halaman, tetapi ia boleh mengosongkan kesan terapung.
Tingkatkan kod di atas, anda boleh mengabstrakkan teg div kosong ke dalam kelas, kodnya adalah seperti berikut:

4. <div class="parent">
     <div class="child left"></div>
     <div class="child right"></div>
     <div class="clear"></div>
   </div>

   rrree
Dalam kod di atas, kami menambah ketinggian: 0; kelas jelas melalui gaya ; Menyembunyikan tag div kosong ini supaya ia tidak menjejaskan reka letak halaman.

2. Gunakan elemen pseudo

Dalam CSS3, anda boleh menggunakan elemen pseudo untuk mengosongkan kesan terapung, seperti yang ditunjukkan di bawah:

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

Dalam kod di atas, kami menambah Cipta kelas clearfix, dan gunakan elemen pseudo: selepas untuk mengosongkan kesan terapung, dan tetapkan kandungan: '';

3 Gunakan atribut limpahan

Tetapkan atribut limpahan elemen induk kepada tersembunyi, auto atau tatal untuk mengosongkan apungan, seperti ditunjukkan di bawah:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

Di atas tiga gaya Tetapan boleh mengosongkan terapung, tetapi apabila ketinggian elemen terapung melebihi elemen induk, bar skrol akan muncul, menjejaskan keindahan dan kebolehgunaan halaman.

4. Gunakan BFC (konteks pemformatan peringkat blok)

Apabila elemen mempunyai atribut BFC, ia akan membungkus elemen terapung di dalam untuk mencapai kesan mengosongkan sintaks BFC adalah seperti berikut ：

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

Dalam kod di atas, kami menetapkan atribut display:block:hidden atau overflow:auto;

Ringkasnya, kita boleh memilih kaedah yang berbeza untuk membersihkan terapung mengikut keperluan sebenar untuk mencapai kesan susun atur yang cantik dan munasabah.

Atas ialah kandungan terperinci Beberapa cara untuk mengosongkan terapung dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!