Analisis sebab atribut limpahan tidak dapat mengosongkan apungan

Analisis ringkas sebab atribut limpahan tidak berkesan dalam membersihkan terapung memerlukan contoh kod khusus

Elemen terapung sering digunakan dalam reka letak halaman web untuk mencapai kesan seperti reka letak berbilang lajur dan terapung gambar. Walau bagaimanapun, apabila elemen terapung digunakan dalam bekas induk, bekas induk sering gagal mengira ketinggiannya dengan betul, menyebabkan kekeliruan reka letak. Untuk menyelesaikan masalah ini, kami biasanya menggunakan beberapa teknik untuk mengosongkan terapung Cara yang lebih biasa ialah menggunakan atribut limpahan.

Atribut limpahan ialah atribut yang biasa digunakan dalam CSS, yang digunakan untuk mengawal cara kandungan melimpah. Ia mempunyai empat nilai pilihan: boleh dilihat (nilai lalai, kandungan tidak akan dipangkas dan akan melimpahi bekas induk), tersembunyi (kandungan akan dipangkas dan bahagian limpahan tidak akan kelihatan), tatal (kandungan akan dipangkas dan bahagian limpahan boleh ditatal), auto (pelayar secara automatik menambah bar skrol mengikut keperluan).

Biasanya, apabila semua elemen anak dalam bekas induk ditetapkan untuk terapung, kami akan cuba menambah atribut limpahan pada bekas induk untuk membersihkan kesan terapung, contohnya:

<style>
    .container {
        overflow: hidden;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

Namun, anehnya, ini nampaknya Apa kerja mungkin tidak berfungsi dalam beberapa kes, dan bekas induk masih tidak dapat mengira ketinggian dengan betul. Untuk menjelaskan fenomena ini, kita perlu memahami dari kaedah pengiraan ketinggian bekas induk unsur terapung.

Bekas induk akan mengabaikan ketinggian elemen anak terapung apabila mengira ketinggiannya sendiri Walaupun elemen anak terapung lebih tinggi daripada bekas induk, bekas induk akan menganggap ketinggian elemen anak adalah sama dengan ketinggian. sebelum terapung. Ini menyebabkan ketinggian bekas tidak menyesuaikan dengan betul elemen terapung dalaman, sekali gus menjejaskan reka letak keseluruhan.

Berbalik kepada kaedah yang kami cuba menggunakan atribut limpahan untuk mengosongkan apungan Sebenarnya, atribut limpahan tidak langsung menjejaskan pembersihan apungan. Ia sebenarnya mencipta BFC (konteks pemformatan peringkat blok) baharu untuk bekas induk BFC boleh difahami sebagai elemen terapung di dalam bekas tidak akan menjejaskan elemen luaran. Disebabkan kaedah penciptaan BFC yang berbeza dan pelaksanaan penyemak imbas yang berbeza, atribut limpahan mungkin tidak sah.

Jadi, jika kita benar-benar ingin membersihkan kesan terapung melalui atribut limpahan, bagaimana kita harus menyelesaikannya? Berikut adalah beberapa penyelesaian biasa untuk rujukan.

1. Gunakan helah clearfix
   Ini ialah kaedah biasa untuk mengosongkan kesan terapung dengan menambahkan elemen peringkat blok kosong pada bekas induk elemen terapung dan menetapkan atribut jelas. Contohnya adalah seperti berikut:

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="clearfix">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

2. Gunakan ::selepas unsur pseudo untuk membersihkan terapung
   Ini adalah penyelesaian yang lebih ringkas, gunakan ::selepas unsur pseudo pada bekas induk unsur terapung dan tetapkan gaya clearfix, contohnya adalah seperti berikut:

<style>
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

3. Guna susun atur flexbox
   flexbox ialah kaedah susun atur baharu yang boleh menyelesaikan masalah yang disebabkan oleh terapung dengan lebih baik. Contohnya adalah seperti berikut:

<style>
    .container {
        display: flex;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

Ringkasnya, kita perlu ambil perhatian bahawa kesan atribut limpahan pada membersihkan terapung tidak langsung, tetapi secara tidak langsung dicapai dengan mencipta BFC. Pada masa yang sama, penyemak imbas yang berbeza melaksanakan BFC dengan cara yang berbeza, yang boleh menyebabkan atribut limpahan menjadi tidak sah. Oleh itu, sebagai tambahan kepada atribut limpahan, kita juga boleh mencuba penyelesaian lain, seperti teknik clearfix, ::after pseudo-element untuk mengosongkan apungan, atau menggunakan kaedah seperti susun atur flexbox untuk mengosongkan apungan.

Atas ialah kandungan terperinci Analisis sebab atribut limpahan tidak dapat mengosongkan apungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!