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:
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!