Contoh untuk menerangkan beberapa kaedah menggunakan CSS untuk mengalih keluar terapung

Dalam reka letak CSS, apungan ialah atribut yang sangat penting Dengan menetapkan arah terapung unsur, anda boleh mencapai kesan reka letak halaman dengan mudah. Walau bagaimanapun, elemen terapung juga boleh menyebabkan beberapa masalah, terutamanya apabila elemen induk tidak menetapkan ketinggian elemen anak terapung boleh menyebabkan ketinggian elemen induk runtuh, menyebabkan kekeliruan dalam reka letak halaman. Oleh itu, mengalih keluar terapung dengan betul juga merupakan bahagian penting dalam pembangunan web.

Dalam artikel ini, kami akan menggunakan contoh untuk menunjukkan beberapa kaedah mengalih keluar terapung, termasuk membersihkan terapung, menggunakan elemen pseudo, menggunakan Grid CSS dan teknik lain.

1. Clear floats

Salah satu kaedah yang paling biasa ialah dengan membersihkan terapung. Kita boleh menambah teg terapung yang jelas selepas elemen induk atau elemen terapung untuk mencapai kesan mengalih keluar unsur terapung.

Terdapat banyak cara untuk mengosongkan terapung Cara yang lebih biasa ialah menggunakan teg kosong dan menetapkan kesan mengosongkan teg kosong yang biasa digunakan termasuk <div> dan <span>.

Contohnya, apabila elemen induk mengandungi berbilang elemen terapung, kita boleh menambah teg div kosong di hujung elemen, dan kemudian menambah atribut clear:both pada teg dalam fail CSS.

<div class="parent">
  <div class="child-float"></div>
  <div class="child-float"></div>
  <div class="clear-fix"></div>
</div>

.clear-fix{
  clear:both;
}

Dengan cara ini, kita boleh mengalih keluar apungan unsur induk dengan mudah.

2. Gunakan elemen pseudo

Selain membersihkan terapung, kita juga boleh menggunakan elemen pseudo CSS untuk menyelesaikan masalah yang disebabkan oleh unsur terapung. Dalam CSS3, kita boleh menggunakan :before dan :after pseudo-elements, yang mewakili penambahan elemen maya sebelum dan selepas elemen masing-masing.

Kita boleh menambah elemen pseudo ::selepas pada elemen induk untuk mengosongkan unsur anak yang terapung Kaedah khusus ialah menambah kelas clearfix (seperti clearfix::after) pada elemen induk , dan kemudian dalam fail CSS clearfix::after add content:"";

<div class="parent clearfix">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

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

Selain itu, kita juga boleh menggunakan elemen pseudo untuk menambah lapisan pembalut kepada unsur terapung Kaedah khusus ialah menambah ::sebelum dan ::selepas elemen pseudo kepada unsur terapung, dan menetapkannya dalam ini. dua elemen pseudo kandungan:""; nilai atribut display:table, supaya kesan lapisan pembalut boleh dicapai.

<div class="parent">
  <div class="float-wrap">
    <div class="child-float"></div>
    <div class="child-float"></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

3. Gunakan Grid CSS

Grid CSS ialah kaedah reka letak baharu, yang menyediakan kaedah reka letak yang lebih fleksibel Dengan menggunakan Grid CSS, kami boleh melaksanakannya dengan mudah reka letak halaman kesan. Apabila menggunakan Grid CSS, kita boleh menggunakan sifat grid-auto-rows untuk melaraskan ketinggian baris secara automatik untuk menyesuaikan diri dengan ketinggian elemen anak.

<div class="parent-css-grid">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

Dalam contoh ini, kami menetapkan elemen induk kepada susun atur Grid, kemudian menetapkan dua lajur (1fr dan 1fr), dan menggunakan atribut grid-auto-rows untuk melaraskan ketinggian baris secara automatik untuk menampung elemen kanak-kanak. Dengan cara ini, walaupun elemen kanak-kanak diapungkan, ia boleh serasi dengan lancar dengan pelbagai pelayar.

Ringkasan

Melalui kaedah di atas, kita boleh membuang terapung dengan mudah dan mengelakkan masalah yang disebabkan oleh keruntuhan ketinggian elemen induk. Sudah tentu, mungkin terdapat penyelesaian terapung yang berbeza dalam senario yang berbeza Memilih penyelesaian yang betul boleh membantu kami meningkatkan kesan reka letak halaman dan meningkatkan kecekapan pembangunan web.

Atas ialah kandungan terperinci Contoh untuk menerangkan beberapa kaedah menggunakan CSS untuk mengalih keluar terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!