CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats

CSS Terapung dan Membersihkan Terapung: Menguasai teknik terapung dan membersihkan terapung memerlukan contoh kod khusus

Dalam reka bentuk dan pembangunan web, CSS Float adalah salah satu teknik susun atur yang biasa. Anda boleh menggunakan apungan untuk mengalihkan elemen ke kiri atau kanan untuk melaraskan dan menyusun elemen pada halaman. Walau bagaimanapun, unsur terapung juga boleh menyebabkan beberapa masalah pada halaman, seperti ketinggian unsur induk runtuh, dsb. Oleh itu, adalah sangat penting untuk menguasai teknik menggunakan terapung dan membersihkannya. Artikel ini akan menumpukan pada apungan CSS dan teknik apungan jelas, serta memberikan contoh kod khusus.

1. Apakah CSS float?

CSS float ialah teknik reka letak yang mengalihkan elemen daripada aliran dokumen biasa supaya terapung ke sebelah kiri atau kanan halaman. Elemen terapung terkeluar daripada aliran dokumen dan menjejaskan reka letak elemen lain. Nilai atribut terapung biasa termasuk: kiri (terapung ke kiri), kanan (terapung ke kanan) dan tiada (tidak terapung).

Aplikasi biasa elemen terapung termasuk: kesan pembalut imej dan teks, reka letak berbilang lajur, bar navigasi, dsb. Sebagai contoh, kita boleh menggunakan kod berikut untuk membuat elemen terapung ke kiri:

.float-left {
  float: left;
}

2. Ciri-ciri CSS terapung

1. Elemen akan pecah daripada aliran dokumen: elemen terapung akan memisahkan aliran dokumen biasa, jadi ia tidak menduduki kedudukan asalnya dalam dokumen. Unsur terapung terapung di atas atau di bawah elemen lain.
2. Kesan elemen pada kedudukan elemen lain: Elemen terapung akan menjejaskan susunan dan susun atur elemen lain. Jika elemen lain tidak dibersihkan daripada terapung, pertindihan atau salah jajaran mungkin berlaku.
3. Saiz elemen mengecil: Lebar elemen terapung secara automatik akan mengecut mengikut kandungannya untuk menyesuaikan diri dengan kedudukan terapung dan elemen sekeliling.

3 Teknik CSS untuk mengosongkan terapung

1. Kaedah asas membersihkan terapung: tambah elemen tambahan pada elemen induk unsur terapung , Kemudian gunakan sifat jelas untuk membersihkan terapung. Nilai atribut jelas biasa termasuk kiri, kanan, kedua-duanya dan tiada.

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

2. Kaedah kelas pseudo untuk mengosongkan terapung: Gunakan kelas pseudo ::selepas untuk memasukkan elemen kosong ke dalam elemen induk unsur terapung dan mengosongkannya daripada pelampung itu.

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

3. Clear float clearfix class: Anda boleh mencipta kelas bernama clearfix dan gunakannya terus pada elemen induk bagi elemen terapung untuk mengosongkan float.

.clearfix {
  overflow: auto;
  zoom: 1;
}

4. Contoh Kod

Berikut ialah contoh kod menggunakan float dan clearing float:

<style>
  .float-left {
    float: left;
    width: 50%;
  }
  
  .float-right {
    float: right;
    width: 50%;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>
<div class="clearfix"></div>

Dalam kod di atas contoh , kami menggunakan atribut terapung untuk mengapungkan dua elemen div masing-masing di sebelah kiri dan kanan halaman. Kemudian, kelas clearfix telah ditambahkan pada elemen induk untuk mengosongkan terapung. Dengan cara ini, elemen induk boleh mengandungi dan menyusun elemen terapung dengan betul.

Ringkasan:

Menguasai kemahiran pelampung CSS dan pelampung jelas adalah sangat penting untuk reka bentuk dan pembangunan web. Menggunakan apungan boleh melaraskan susun atur halaman dan kedudukan elemen, manakala membersihkan apungan boleh menyelesaikan masalah yang disebabkan oleh unsur terapung. Semoga contoh kod khusus yang disediakan dalam artikel ini akan membantu pembaca lebih memahami dan menggunakan float dan clear float.

Atas ialah kandungan terperinci CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!