Buang maksud terapung
Membersihkan apungan bermaksud bahawa dalam reka letak halaman web, apabila elemen ditetapkan dengan atribut terapung, elemen sekeliling akan terjejas, yang boleh menyebabkan kekeliruan reka letak atau tiruan. Untuk menyelesaikan masalah ini, kita perlu menggunakan beberapa helah untuk membersihkan kesan terapung.
Biasanya, elemen terapung akan menyebabkan elemen induknya runtuh, ketinggian tidak boleh dikira secara normal, dan elemen adik beradik mereka mungkin terlindung atau tersalah letak. Pada masa ini, kita perlu mengosongkan apungan dan mengembalikan elemen kepada susun atur biasa.
Teknik biasa untuk mengosongkan terapung termasuk yang berikut:
- Gunakan label kosong tidak terapung berketinggian tetap untuk mengosongkan terapung, seperti menambah label div kosong selepas elemen terapung dan tetapan
clear: kedua-duanya untuk label ;
atribut. Ini membolehkan elemen induk mengira semula ketinggiannya dan mengosongkan kesan terapung.clear: both;
属性。这样可以使父元素重新计算高度,清除浮动的影响。
<div class="clearfix"></div> <style> .clearfix { clear: both; } </style>
- 使用
overflow: hidden;
属性清除浮动,给浮动元素的父元素设置overflow: hidden;
属性,可以让父元素自动扩展高度以包含浮动元素。
<div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent { overflow: hidden; } .child { float: left; } </style>
- 使用伪元素
::after
<div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent::after { content: ""; display: table; clear: both; } .child { float: left; } </style>
overflow: hidden;
untuk mengosongkan apungan dan tetapkan atribut overflow: hidden;
kepada elemen induk daripada elemen terapung untuk membenarkan Elemen induk mengembang ketinggian secara automatik untuk mengandungi elemen terapung. rrreeeGunakan pseudo-element ::after
untuk mengosongkan terapung, tetapkan gaya berikut kepada elemen induk bagi elemen terapung dan tambahkan pseudo-element pada jelaskan kesan terapung.
Atas ialah kandungan terperinci Buang maksud terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Harga USD Bitcoin masa nyata Faktor yang menjejaskan harga bitcoin Petunjuk untuk meramalkan harga bitcoin masa depan Berikut adalah beberapa maklumat penting mengenai harga Bitcoin pada 2018-2024:

Ya, pengeluaran halaman H5 adalah kaedah pelaksanaan penting untuk pembangunan front-end, yang melibatkan teknologi teras seperti HTML, CSS dan JavaScript. Pemaju membina halaman H5 yang dinamik dan berkuasa dengan bijak menggabungkan teknologi ini, seperti menggunakan & lt; kanvas & gt; Tag untuk menarik grafik atau menggunakan JavaScript untuk mengawal tingkah laku interaksi.

Kaedah penyesuaian simbol saiz semula dalam CSS bersatu dengan warna latar belakang. Dalam perkembangan harian, kita sering menghadapi situasi di mana kita perlu menyesuaikan butiran antara muka pengguna, seperti menyesuaikan ...

Cara menggunakan JavaScript atau CSS untuk mengawal bahagian atas dan akhir halaman dalam tetapan percetakan penyemak imbas. Dalam tetapan percetakan penyemak imbas, ada pilihan untuk mengawal sama ada paparan ...

Mengenai sebab-sebab dan penyelesaian untuk memaparkan unsur-unsur blok sebaris. Apabila menulis susun atur laman web, kami sering menghadapi masalah paparan yang kelihatan aneh. Bandingkan ...

Cara dengan elegan mengendalikan jarak tag span selepas garis baru dalam susun atur laman web, anda sering memenuhi keperluan untuk mengatur pelbagai rentang secara mendatar ...

Mengapa margin negatif tidak berkuatkuasa dalam beberapa kes? Semasa pengaturcaraan, margin negatif dalam CSS (negatif ...

Melaksanakan susun atur responsif menggunakan CSS apabila kami ingin melaksanakan perubahan susun atur di bawah saiz skrin yang berbeza dalam reka bentuk web, CSS ...
