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:

 
左浮动元素
 
右浮动元素
 

2. Gunakan atribut limpahan:

.clearfix { overflow: hidden; }

 
左浮动元素
 
右浮动元素
 

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

 
左浮动元素
 
右浮动元素
 

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

 
左浮动元素
 
右浮动元素
 

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

 
左浮动元素
 
右浮动元素
 

.parent-element { overflow: hidden; }

 
左浮动元素
 
右浮动元素
 

# 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:

 
左浮动元素
 
右浮动元素
 

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!