Rumah > hujung hadapan web > tutorial css > Apakah peranan clear dalam css

Apakah peranan clear dalam css

下次还敢
Lepaskan: 2024-04-26 10:27:13
asal
876 orang telah melayarinya

Atribut jelas dalam CSS digunakan untuk mengosongkan kesan unsur terapung pada elemen seterusnya dan memastikan elemen seterusnya disusun secara normal. Atribut clear mempunyai 4 nilai: tiada: jangan clear floats left: clear left floats right: clear right floats both: clear left and right floats

Apakah peranan clear dalam css

Peranan clear dalam CSS

dalam reka letak CSS , atribut yang jelas digunakan untuk membersihkan kesan unsur terapung pada unsur seterusnya. Elemen terapung akan menjejaskan kedudukan elemen seterusnya menyebabkan elemen seterusnya tidak tersusun secara normal.

Apungan jelas

Atribut jelas mempunyai nilai berikut:

  • tiada: Tidak membersihkan sebarang terapung.
  • kiri: Kosongkan unsur terapung di sebelah kiri.
  • kanan: Kosongkan elemen terapung di sebelah kanan.
  • kedua-duanya: Elemen terapung jelas di bahagian kiri dan kanan.

Senario penggunaan

Apabila anda memerlukan elemen berikutnya untuk disusun secara normal di bawah elemen terapung, anda boleh menggunakan atribut yang jelas. Contohnya:

<code class="css">.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}</code>
Salin selepas log masuk

Dalam contoh ini, elemen .float-left terapung di sebelah kiri, dan elemen .clear membersihkan pengaruh unsur terapung melalui clear: kedua-duanya, supaya elemen seterusnya boleh disusun secara normal.

Contoh

Gambar di bawah adalah contoh penggunaan atribut jelas:

[Gambar menunjukkan dua elemen, elemen kiri terapung, elemen kanan menggunakan jelas: kedua-duanya]

Elemen kanan menggunakan jelas : kedua-duanya

[Gambar menunjukkan bahawa unsur terapung dibersihkan dan unsur-unsur di sebelah kanan disusun secara normal]

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

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan