css clear float

Css Tips Clearfix

Floating ialah teknologi reka letak yang sangat penting dalam CSS dan digunakan secara meluas dalam reka letak halaman web. Tetapi ia juga akan menyebabkan beberapa masalah, seperti keruntuhan ketinggian elemen induk. Teknologi Clearfix telah dicipta untuk menyelesaikan masalah ini Artikel ini akan memperkenalkan beberapa kaedah biasa untuk membersihkan terapung.

1. Masalah terapung

Pertama sekali, mari kita fahami masalah terapung.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Kesannya adalah seperti yang ditunjukkan di bawah:

Seperti yang anda lihat , kiri Kedua-dua kawasan sisi dan kawasan kanan menggunakan teknologi terapung. Tetapi jika kita mahu ketinggian unsur induk (iaitu ibu bapa) sama dengan ketinggian unsur anak, maka masalah berikut akan berlaku:

Seperti yang anda boleh lihat, ketinggian unsur induk Jauh lebih kecil. Ini kerana elemen kanak-kanak menggunakan terapung, jadi ia berada di luar aliran dokumen, dan elemen induk tidak mengandunginya, menyebabkan ia tidak dikira semasa mengira ketinggian.

2. Beberapa kaedah membersihkan terapung

Untuk menyelesaikan masalah ini, kita perlu membiarkan elemen induk mengira semula ketinggian dengan mengosongkan terapung. Berikut ialah beberapa kaedah yang biasa digunakan untuk mengosongkan terapung:

1 Gunakan label kosong untuk mengosongkan terapung

Ini adalah kaedah yang sangat biasa, yang menggunakan ciri label kosong untuk mengosongkan kod adalah seperti berikut:

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Tambah teg kosong di hujung elemen induk dan tetapkan clear:both untuk menunjukkan bahawa teg itu dikosongkan pelampung itu.

Walau bagaimanapun, kaedah ini lebih menyusahkan dan memerlukan penambahan tag yang tidak bermakna, yang tidak kondusif untuk penyelenggaraan kod.

2. Gunakan ::selepas unsur pseudo untuk mengosongkan terapung

Serupa dengan kaedah pertama, gunakan ::selepas unsur pseudo untuk mengosongkan terapung. Oleh kerana ::after ialah elemen blok, anda boleh menambah elemen peringkat blok selepas elemen terapung untuk mengosongkan apungan.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

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

Gunakan ::after pseudo-element pada elemen induk dan tetapkan content:"";display:block;clear:both; untuk menambah tahap blok selepas elemen induk Elemen, terapung jelas.

Kaedah ini hanya memerlukan penambahan gaya CSS pada elemen induk, tanpa menambah teg HTML tambahan, yang sangat mudah.

3. Gunakan BFC untuk mengosongkan apungan

BFC (Konteks Pemformatan Blok, konteks pemformatan peringkat blok) ialah konsep dalam CSS yang membolehkan elemen dipaparkan dalam kawasan pemaparan bebas, anda boleh kosongkan pelampung. Pelaksanaannya adalah seperti berikut:

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

Tetapkan overflow:hidden pada elemen induk terbentuk BFC yang membolehkan unsur terapung terkandung dengan betul.

Tetapi kaedah ini juga mempunyai beberapa had, kerana ia akan mengubah gaya elemen induk Contohnya, elemen induk tidak boleh menetapkan margin negatif, dan ia juga tidak boleh menetapkan atribut indeks-z.

3. Ringkasan

Artikel ini memperkenalkan beberapa kaedah mengosongkan terapung, termasuk menggunakan tag kosong untuk mengosongkan terapung, menggunakan ::selepas elemen pseudo untuk mengosongkan terapung dan menggunakan BFC untuk mengosongkan terapung. Kaedah ini adalah semua teknik yang diamalkan dan boleh digunakan secara fleksibel dalam pembangunan projek untuk menyelesaikan masalah yang disebabkan oleh terapung.

Atas ialah kandungan terperinci css clear float. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!