masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web html tutorial 浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 09:04 AM

  • 额外标签法

  • 使用:after 伪元素

  • 给父元素定高

  • 利用overflow:hidden;属性

  • 父元素浮动

  • 父元素处于绝对定位

    • 在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题

    引出问题：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width:300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上写边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下

    解决办法：

    1.使用额外标签发

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix{            clear: both;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>        <div class="clearfix"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

    2.使用:after 为元素

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{  /*最简方式*/            content: '';            display: block;            clear: both;        }        /* 新浪使用方式        .clearfix:after{             content: '';            display: block;            clear: both;            height: 0;            visibility: hidden;        }        */        .clearfix{ /*兼容 IE*/            zoom: 1;        }    </style></head><body>    <div class="outer clearfix">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    3.给父元素定高

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            height: 50px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    4.利用 overflow:hidden 属性

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            overflow: hidden;            zoom: 1;/*兼容 IE*/        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    5.父元素浮动

    当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若无处于正常文档流，会被跌在底下。
    如果要解决可以参考前面的办法。

    例如：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{            content: "";            display: block;            clear: both;        }        .clearfix{            zoom: 1;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Salin selepas log masuk

    6.父元素处于绝对定位

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            position: absolute;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Salin selepas log masuk


    与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

    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

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Tunjukkan Lagi

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Assassin's Creed Shadows: Penyelesaian Riddle Seashell
    2 minggu yang lalu By DDD
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Arahan sembang dan cara menggunakannya
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Tunjukkan Lagi

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Tunjukkan Lagi

    Topik panas

    Di manakah pintu masuk log masuk untuk e-mel gmail?
    7542
    15
    Tutorial CakePHP
    1381
    52
    Apakah format nama akaun stim
    83
    11
    kunci pengaktifan win11 kekal
    55
    19
    Sambungan NYT menunjukkan dan jawapan
    21
    87
    Tunjukkan Lagi
    Related knowledge
    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

    Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

    Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

    Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

    HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

    See all articles