Bagaimana untuk membatalkan terapung dalam css

Css de-floating ialah teknologi yang sangat berguna dalam reka bentuk web Ia boleh mengelakkan masalah susun atur yang tidak dijangka yang disebabkan oleh unsur terapung dan memastikan susun atur keseluruhan halaman web lebih cantik dan standard. Artikel ini akan memperkenalkan anda kepada terapung dan sifat CSS yang berkaitan dengannya, serta cara menyahterapungkannya dengan betul.

Apakah apungan?

Dalam reka bentuk web, terapung ialah pergerakan elemen ke kiri atau kanan, keluar daripada aliran biasa dokumen dan kandungan di sekelilingnya disusun semula untuk menampung saiz dan kedudukan elemen. Dalam keadaan biasa, terapung boleh menjadikan elemen dalam halaman web lebih fleksibel dan menjadikan reka letak halaman web lebih bersatu dan kemas. Walau bagaimanapun, terapung juga boleh menyebabkan ruang putih yang pelik atau bertindih antara elemen, merosakkan keseluruhan reka bentuk web.

Bagaimana untuk menetapkan elemen terapung?

Terapung dicapai melalui atribut apungan dalam CSS. Atribut terapung boleh mempunyai nilai berikut:

kiri: Terapung elemen ke kiri

kanan: Terapung elemen ke kanan

tiada: Tidak terapung, masih dalam dokumen biasa

Kaedah untuk membersihkan terapung dalam aliran

Untuk mengelakkan masalah susun atur yang disebabkan oleh terapung, ia biasanya perlu diselesaikan dengan membersihkan terapung. Berikut ialah beberapa kaedah untuk mengosongkan terapung:

1. Menggunakan kelas yang mengosongkan terapung

Anda boleh menambah kod berikut dalam fail CSS untuk menentukan kelas yang mengosongkan terapung :

.clearfix:before, .clearfix:after { content:""; paparan: table; 🎜> Dalam fail HTML, anda hanya perlu menambah kelas clearfix kepada elemen yang perlu dikosongkan.

Gunakan atribut limpahan

2. Anda boleh menambah atribut limpahan pada elemen induk elemen yang perlu dikosongkan untuk mengosongkan apungan. Kod berikut:

.parent { overflow: hidden; }

Kelebihan kaedah ini ialah ia mudah dan mudah digunakan, tetapi ia mempunyai kelemahan: jika ketinggian elemen terapung melebihi elemen induknya, maka Elemen boleh dipotong.

Gunakan elemen pseudo

3. Anda boleh menambah elemen pseudo selepas elemen yang perlu dikosongkan daripada apungan dan tetapkan atribut jelas untuk mengosongkan apungan. Berikut ialah kod contoh:

.clearfix:after { content: ""; display: block; both; Seks tidak sebaik kaedah pertama.

Kesimpulan

Dalam reka bentuk web, terapung boleh menjadikan elemen web lebih fleksibel, tetapi ia juga boleh menyebabkan masalah reka letak. Untuk elemen yang perlu dibuang, anda boleh menggunakan kaedah apungan jelas untuk mengelakkan masalah ini. Secara khusus, terdapat tiga cara untuk mengosongkan terapung: menggunakan kelas pembersihan apungan, menggunakan atribut limpahan dan menggunakan elemen pseudo. Setiap kaedah mempunyai kelebihan dan kekurangannya, dan pembangun boleh memilih kaedah yang hendak digunakan berdasarkan keperluan sebenar mereka.

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