Rumah hujung hadapan web Soal Jawab bahagian hadapan Apakah cara untuk membersihkan terapung?

Apakah cara untuk membersihkan terapung?

Oct 27, 2023 pm 04:13 PM
terapung jelas

Cara untuk mengosongkan terapung termasuk menggunakan atribut jelas, menggunakan atribut limpahan, menggunakan BFC, menggunakan reka letak fleksibel, menggunakan reka letak grid dan menggunakan elemen pseudo untuk mengosongkan terapung. Pengenalan terperinci: 1. Gunakan atribut jelas Ini adalah cara yang paling biasa digunakan untuk mengosongkan apungan atribut yang jelas: kiri, kanan, kedua-duanya dan tiada;

Apakah cara untuk membersihkan terapung?

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Dalam CSS, cara utama untuk mengosongkan terapung adalah seperti berikut:

  1. Gunakan atribut yang jelas:

Ini ialah cara yang paling biasa digunakan untuk mengosongkan terapung. Tambahkan elemen selepas elemen terapung dan tetapkan sifat jelas padanya untuk mengelakkannya daripada terapung dengan elemen terapung sebelum ini. Atribut yang jelas mempunyai empat nilai: kiri, kanan, kedua-duanya dan tiada. Nilai kiri dan kanan digunakan untuk membersihkan terapung di sebelah kiri dan kanan masing-masing, kedua-dua nilai digunakan untuk membersihkan terapung di kedua-dua belah, dan nilai tiada bermakna tiada pembersihan dilakukan. Contohnya:

<div style="float:left;">浮动的元素</div>  <div style="clear:both;"></div>
Salin selepas log masuk
  1. Gunakan atribut limpahan:

Dengan menetapkan atribut limpahan untuk elemen induk, anda boleh menjadikan ketinggian elemen induk berkembang secara automatik untuk memasukkan elemen anak terapung. Kaedah ini sering digunakan bersama dengan teknik clearfix. Contohnya:

.clearfix::after {content: "";display: table;clear: both;}
Salin selepas log masuk
  1. Gunakan BFC (Konteks Pemformatan Blok):

BFC ialah mekanisme pemaparan yang menentukan cara sesuatu elemen meletakkan kandungannya, serta hubungan dan interaksinya dengan elemen lain. BFC boleh dihidupkan dengan menetapkan sifat CSS berikut:

  • limpahan: sebarang nilai kecuali auto dan tatal (contohnya, limpahan:tersembunyi).
  • opacity: nilai selain 0.
  • transformasi: nilai selain daripada tiada.
  • akan-perubahan: sebarang nilai.
  • -webkit-overflow-scrolling: sebarang nilai selain daripada sentuhan.
  • paparan: sebarang nilai selain daripada akar alir.
  • kotak baharu: Apabila membuat kotak baharu (contohnya, menggunakan flexbox atau susun atur grid).
  1. Gunakan susun atur fleksibel:

Susun atur fleksibel ialah kaedah reka letak CSS moden yang secara automatik mengendalikan penjajaran, arah dan susunan elemen. Dalam susun atur fleksibel, elemen terapung dikosongkan secara automatik tanpa operasi tambahan. Contohnya:

.container {display: flex;}
Salin selepas log masuk
  1. Menggunakan susun atur grid:

Susun atur grid juga merupakan kaedah susun atur CSS moden yang membolehkan penciptaan susun atur dua dimensi yang kompleks. Dalam susun atur grid, unsur terapung dikosongkan secara automatik tanpa operasi tambahan. Contohnya:

.container {display: grid;}
Salin selepas log masuk
  1. Clear float menggunakan pseudo-element:

Ini ialah helah biasa untuk mengosongkan apungan dengan menetapkan sifat jelas pada pseudo-element elemen induk. Contohnya:

.parent::after {content: "";display: table;clear: both;}
Salin selepas log masuk

Atas ialah kandungan terperinci Apakah cara untuk membersihkan terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelaraskan kotak input dalam html Bagaimana untuk menyelaraskan kotak input dalam html Apr 05, 2024 am 10:18 AM

Bagaimana untuk menyelaraskan kotak input dalam html

Apakah 5 cara untuk membersihkan terapung? Apakah 5 cara untuk membersihkan terapung? Nov 20, 2023 pm 04:27 PM

Apakah 5 cara untuk membersihkan terapung?

Adakah terdapat sebarang cara untuk membersihkan terapung? Adakah terdapat sebarang cara untuk membersihkan terapung? Feb 22, 2024 pm 04:00 PM

Adakah terdapat sebarang cara untuk membersihkan terapung?

Apakah susun atur susun atur? Apakah susun atur susun atur? Feb 24, 2024 pm 03:03 PM

Apakah susun atur susun atur?

Apakah cara untuk membersihkan terapung dalam css Apakah cara untuk membersihkan terapung dalam css Oct 30, 2023 am 11:57 AM

Apakah cara untuk membersihkan terapung dalam css

Mengapa apungan jernih limpahan tidak mempunyai kesan? Mengapa apungan jernih limpahan tidak mempunyai kesan? Oct 17, 2023 pm 02:29 PM

Mengapa apungan jernih limpahan tidak mempunyai kesan?

Mengapa unsur terapung tidak boleh dibersihkan oleh harta limpahan Mengapa unsur terapung tidak boleh dibersihkan oleh harta limpahan Jan 27, 2024 am 08:08 AM

Mengapa unsur terapung tidak boleh dibersihkan oleh harta limpahan

CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats Nov 18, 2023 am 10:56 AM

CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats

See all articles