masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > teks badan

CSS清除浮动（float）的六种方法

高洛峰
Lepaskan： 2017-03-15 11:05:16
asal
1606 orang telah melayarinya

html

    <p>
        <p class=&#39;box-left&#39;></p>
        <p class=&#39;box-right&#39;></p>
    </p>
Salin selepas log masuk

css

    .box-left,.box-right{
        width:200px;
        height:200px;        float: left;
        background: red;
        border:1px solid #333;
    }
Salin selepas log masuk

第一种方法：.box{clear:box}

第二种方法：.box{overflow:hidden}

第三种方法：.box{overflow:auto}

 第四种方法：.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法：.box{height:200px}设置高度

第六种方法：.box{display:table}

还有什么方法欢迎补充，加油，共同进步

 

Atas ialah kandungan terperinci CSS清除浮动（float）的六种方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
terapung jelas
sumber：php.cn
Artikel sebelumnya：标题栏的title前添加网站logo的方法 Artikel seterusnya：如何解决margin折叠从子元素margin-top影响父元素引出的问题
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Walaupun selepas mengosongkan, nilai input fail saya kekal Seperti yang anda boleh lihat dalam tangkapan skrin. Saya memilih fail, menyimpan pop timb...
daripada 2024-04-06 15:44:52
0
1
384
Masalah permulaan sifat CommandText Saya cuba untuk merealisasikan data ke dalam 2 (kemudian 3) jadual secara serentak menggun...
daripada 2024-04-04 22:43:24
0
1
385
isu jQuery.remove() dan array.splice(). Jadi saya mempunyai halaman yang mempunyai senarai item dan senarai beli-belah. Jika anda ...
daripada 2024-04-04 17:21:35
0
1
347
Tajuk yang disemak: Kira jumlah berdasarkan pilihan kotak pilihan Saya sedang membangunkan aplikasi penjejakan kewangan yang mudah. Dalam permohonan itu, te...
daripada 2024-04-04 13:45:50
0
1
3465
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan