Apakah cara untuk membersihkan terapung dalam css

Css cara untuk mengosongkan terapung termasuk menggunakan atribut clear, atribut limpahan, kelas clearfix, kelas clearfix elemen induk, elemen pseudo untuk mengosongkan float, atribut limpahan elemen induk dan atribut jelas digabungkan dengan BFC. Pengenalan terperinci: 1. Gunakan atribut jelas, kaedah mudah dan biasa digunakan untuk mengosongkan terapung Dengan menambahkan elemen peringkat blok kosong selepas elemen terapung dan menetapkan atribut jelas untuknya, anda boleh mengosongkan kesan terapung sebelumnya dan menjadikannya. Unsur-unsur di bawah dibentangkan secara normal dan sebagainya.

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

Dalam CSS, apungan ialah teknik reka letak biasa yang membenarkan elemen keluar daripada aliran dokumen biasa dan terapung di sepanjang sebelah kiri atau kanan bekasnya. Walau bagaimanapun, apabila unsur terapung mempunyai ketinggian yang berbeza atau terdapat pertindihan antara unsur terapung, ia boleh menyebabkan kekeliruan reka letak atau kesan sampingan yang tidak dijangka. Untuk menyelesaikan masalah ini, kita boleh menggunakan cara yang berbeza untuk mengosongkan terapung. Di bawah ini saya akan memperkenalkan beberapa kaedah CSS yang biasa digunakan untuk mengosongkan terapung.

1 Gunakan atribut jelas:

Atribut jelas ialah kaedah yang mudah dan biasa digunakan untuk membersihkan terapung. Dengan menambah elemen peringkat blok kosong selepas elemen terapung dan menetapkan atribut jelas, kesan elemen terapung sebelumnya boleh dikosongkan dan elemen di bawahnya boleh dibentangkan secara normal. Atribut jelas boleh ditetapkan ke kiri, kanan, kedua-duanya, atau tiada, yang bermaksud membersihkan terapung kiri, terapung kanan, membersihkan terapung kiri dan kanan pada masa yang sama, atau masing-masing tidak membersihkan terapung.

Kod contoh:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }

Contoh kod HTML:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

2. Gunakan atribut limpahan:

# atribut ialah Satu lagi kaedah biasa untuk membersihkan terapung. Dengan menetapkan atribut limpahan kepada auto atau tersembunyi pada bekas unsur terapung, anda boleh mencetuskan BFC (konteks pemformatan peringkat blok), dengan itu mengosongkan kesan terapung. Ini kerana BFC akan memasukkan elemen terapung dan mengira ketinggiannya supaya bekas boleh dibentangkan secara normal.

Contoh kod:

   .clearfix {
     overflow: hidden;
   }

Contoh kod HTML:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

3. class ialah Nama kelas yang biasa digunakan untuk mengosongkan terapung boleh digunakan untuk mengosongkan kesan terapung dengan menambahkan kelas clearfix pada bekas unsur terapung. Kaedah ini biasanya menggunakan pseudo-class::after untuk menambah elemen peringkat blok kosong dan menetapkan atribut yang jelas untuknya.

Kod contoh:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Contoh kod HTML:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

4 🎜# Dalam sesetengah kes, kita boleh menambah kelas clearfix terus kepada elemen induk unsur terapung untuk mengosongkan kesan terapung. Kaedah ini adalah serupa dengan kaedah kelas clearfix yang dinyatakan di atas, tetapi menambah kelas clearfix pada elemen induk boleh mengosongkan kesan terapung semua elemen anak dengan lebih mudah.

Contoh kod:

   .parent-element::after {
     content: "";
     display: block;
     clear: both;
   }

Contoh kod HTML:

   <div class="parent-element clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

5. Kecuali Selain menggunakan pseudo-class::after, kita juga boleh menggunakan pseudo-element::before untuk mengosongkan terapung. Dengan menambahkan elemen peringkat blok kosong pada bekas elemen terapung dan menetapkan atribut kandungannya kepada rentetan kosong, BFC boleh dicetuskan untuk mengosongkan kesan terapung.

Kod contoh:

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   .clearfix::after {
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Contoh kod HTML:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

6 Gunakan atribut limpahan elemen induk: #🎜🎜 🎜# Selain menetapkan atribut limpahan pada bekas elemen terapung, kami juga boleh menetapkan atribut limpahan pada elemen induknya untuk mengosongkan kesan terapung. Kaedah ini adalah serupa dengan kaedah atribut limpahan yang dinyatakan di atas, tetapi menetapkan atribut limpahan pada elemen induk memudahkan untuk mengosongkan kesan terapung semua elemen anak.

Contoh kod:

   .parent-element {
     overflow: hidden;
   }

Contoh kod HTML:

   <div class="parent-element">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

7 Gunakan atribut yang jelas dan BFC:

# Dalam sesetengah kes, kita boleh mengosongkan terapung dengan menggabungkan atribut jelas dengan BFC. Dengan menambahkan elemen peringkat blok kosong selepas elemen terapung, menetapkan atribut jelas untuknya, dan kemudian menetapkan atribut limpahan bekas elemen terapung kepada automatik atau tersembunyi, anda boleh menggunakan kedua-dua kaedah ini pada masa yang sama untuk mengosongkan kesan terapung.

Contoh kod:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     overflow: hidden;
   }

Contoh kod HTML:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

Secara ringkasnya, cara CSS untuk mengosongkan terapung termasuk menggunakan atribut jelas dan atribut limpahan , kelas clearfix, kelas clearfix elemen induk, pseudo-element clear float, atribut limpahan elemen induk dan atribut clear digabungkan dengan BFC dan kaedah lain. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sesuai untuk mengosongkan terapung berdasarkan keperluan khusus dan keadaan susun atur untuk memastikan susun atur halaman adalah betul dan selaras dengan jangkaan.

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