Mengapa atribut limpahan tidak berfungsi apabila pembersihan apungan tidak sah, analisis sebab

Mengapa atribut limpahan tidak sah untuk pembersihan apungan memerlukan contoh kod khusus

Apung (float) ialah salah satu kaedah reka letak yang biasa digunakan dalam CSS membolehkan ia terapung pada induknya Bahagian kiri atau kanan elemen. Walau bagaimanapun, elemen terapung boleh menyebabkan beberapa masalah reka letak Salah satunya ialah elemen terapung tidak dapat menyokong ketinggian elemen induk, menyebabkan ketinggian elemen induk runtuh. Untuk menyelesaikan masalah ini, kami biasanya menggunakan teknik membersihkan terapung.

Apabila mengosongkan terapung, atribut yang biasa digunakan ialah overflow:hidden Fungsinya adalah untuk mencipta BFC (konteks pemformatan peringkat blok) baharu untuk mengandungi elemen terapung. Walau bagaimanapun, kadangkala kami mendapati bahawa limpahan tetapan:tersembunyi tidak mempunyai kesan mengosongkan terapung. Marilah kita menganalisisnya bersama-sama.

Pertama, kita perlu memahami cara atribut limpahan berfungsi. Apabila overflow:hidden ditetapkan, elemen akan mencipta BFC baharu Salah satu ciri BFC ialah ia akan mengandungi unsur terapung. Oleh itu, dalam keadaan biasa, menetapkan limpahan:tersembunyi memang boleh mengosongkan terapung, membenarkan elemen induk memaparkan elemen anak terapung secara normal dan mengembangkan ketinggian.

Walau bagaimanapun, dalam beberapa kes khas, limpahan:tersembunyi akan gagal dan tidak akan berfungsi. Salah satu situasi biasa ialah ketinggian unsur induk diregangkan oleh unsur anak terapung, tetapi unsur induk itu sendiri tidak menetapkan sebarang ketinggian. Pada masa ini, menetapkan limpahan:tersembunyi tidak mengosongkan apungan.

Ini kerana apabila elemen tidak menetapkan ketinggian tertentu, ketinggiannya dikembangkan oleh kandungan secara lalai. Elemen terapung tidak lagi menduduki kedudukan dalam aliran dokumen, jadi elemen induk tidak dapat merasakan ketinggian elemen anak terapung dan dengan itu tidak dapat menyokong dirinya sendiri berhubung dengan elemen anak.

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah lain untuk membersihkan terapung. Satu kaedah biasa ialah menambah elemen peringkat blok kosong dan kosongkan apungannya. Kod khusus adalah seperti berikut:

<style>
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
    .box {
        width: 200px;
        border: 1px solid #ccc;
    }
    .float-left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 20px;
    }
</style>

<div class="box clearfix">
    <div class="float-left"></div>
    <div class="float-left"></div>
    <!-- 添加一个空的块级元素用于清除浮动 -->
    <div class="clearfix"></div>
</div>

Dalam kod di atas, kami menambah kelas clearfix pada kotak elemen induk dan menggunakan elemen pseudo:before atau :after untuk menambah elemen peringkat blok kosong padanya dan mengosongkannya. Operasi apungan. Dengan cara ini, apungan dikosongkan dan ketinggian elemen induk diregangkan dengan betul.

Selain kaedah di atas, terdapat cara lain untuk mengosongkan terapung, seperti menggunakan kelas clearfix untuk mengosongkan terapung, atau menggunakan perpustakaan kelas pembersihan terapung khusus. Dalam situasi yang berbeza, anda mungkin perlu memilih kaedah pembersihan terapung yang berbeza. Dalam pembangunan sebenar, adalah penting untuk memilih kaedah pembersihan terapung yang paling sesuai mengikut senario tertentu.

Ringkasnya, tetapan limpahan:tersembunyi tidak semestinya berkesan dalam menyelesaikan masalah keruntuhan ketinggian yang disebabkan oleh terapung. Dalam sesetengah kes khas, ketinggian unsur induk diregangkan oleh unsur anak terapung dan tetapan limpahan:tersembunyi tidak mempunyai kesan. Pada ketika ini, kita boleh menggunakan kaedah lain untuk mengosongkan apungan dengan betul dan membuat elemen induk mengembangkan ketinggiannya dengan betul.

Atas ialah kandungan terperinci Mengapa atribut limpahan tidak berfungsi apabila pembersihan apungan tidak sah, analisis sebab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!