Bagaimana untuk mengosongkan terapung dalam css3

Css3 clear float

Semasa pembangunan web, float ialah sifat CSS yang sangat biasa digunakan untuk reka letak. Terapung membolehkan elemen melarikan diri dari aliran dokumen dan diletakkan secara bebas pada halaman mengikut keperluan. Tetapi terapung juga mempunyai masalah, iaitu, ia boleh menyebabkan elemen bertindih atau menyebabkan ketinggian elemen induk runtuh. Untuk menyelesaikan masalah ini, kita perlu menggunakan beberapa helah untuk membersihkan terapung.

1. Apa itu apungan

Dalam CSS, apungan bermaksud terapung. Ia adalah kaedah meletakkan elemen. Apabila elemen mempunyai set atribut apungan, ia terputus daripada aliran dokumen dan bergerak ke kiri atau kanan sehingga tepi luarnya menyentuh tepi elemen yang mengandunginya atau tepi elemen terapung yang lain.

2. Masalah terapung

Walaupun terapung boleh membuat elemen diletakkan secara bebas, ia juga boleh menyebabkan beberapa masalah. Sebagai contoh, elemen terapung akan menyebabkan ketinggian elemen induk runtuh Masalah ini boleh diselesaikan dengan menetapkan atribut limpahan kepada elemen induk. Pada masa yang sama, terapung juga akan menyebabkan elemen bertindih Masalah ini boleh diselesaikan dengan menggunakan atribut yang jelas.

3. Kaedah mengosongkan terapung

1 Gunakan atribut jelas

Dalam CSS, atribut jelas digunakan untuk mengosongkan atribut terapung. Ia mempunyai empat nilai iaitu kiri, kanan, kedua-duanya dan tiada. Antaranya, kiri bermaksud membersihkan terapung kiri, kanan bermaksud membersihkan terapung kanan, kedua-duanya bermaksud membersihkan terapung kiri dan kanan, dan tiada bermaksud tidak membersihkan sebarang terapung.

Contohnya:

.clearfix { clear: both; }

Dalam contoh ini, kami menggunakan kelas clearfix untuk mengosongkan terapung. Dalam HTML, kita boleh menambah kelas ini kepada elemen yang perlu mengosongkan terapung:

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

2. Gunakan elemen kosong

Selain atribut yang jelas, kita juga boleh menggunakan kosong elemen untuk membersihkan terapung.

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div style="clear:both;"></div>
</div>

Dalam contoh ini, kami menggunakan elemen kosong untuk mengosongkan apungan Elemen ini tidak muncul pada halaman, tetapi ia akan menduduki ruang di bawah elemen terapung, sekali gus menghalang pertindihan dan ketinggian elemen induk. Runtuh.

3 Gunakan model kotak

Dalam CSS3, kita boleh menggunakan atribut saiz kotak untuk mengosongkan terapung. box-sizing mempunyai dua nilai iaitu content-box dan border-box. Antaranya, kotak kandungan bermaksud lebar dan tinggi elemen hanya merangkumi lebar dan tinggi kandungan, manakala kotak sempadan bermaksud lebar dan tinggi elemen merangkumi lebar dan tinggi kandungan serta lebar sempadan.

Contohnya:

.clearfix {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
}

Dalam contoh ini, kami menggunakan saiz kotak untuk mengosongkan pelampung. Memandangkan kotak sempadan ditetapkan, pelapik dan jidar tidak akan mengubah saiz elemen, sekali gus mengelakkan masalah elemen terapung bertindih dan keruntuhan ketinggian unsur induk.

4. Ringkasan

Melalui pengenalan di atas, kami memahami apa itu terapung dan masalah yang disebabkan oleh terapung. Pada masa yang sama, kami juga mempelajari tiga kaedah membersihkan terapung, iaitu menggunakan atribut jelas, menggunakan elemen kosong dan menggunakan model kotak. Dalam projek sebenar, kita boleh memilih kaedah pembersihan apungan yang sesuai mengikut situasi sebenar.

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