Rumah  >  Artikel  >  hujung hadapan web  >  清除浮动的几种方法

清除浮动的几种方法

php中世界最好的语言
php中世界最好的语言asal
2018-03-22 11:43:112496semak imbas

这次给大家带来清除浮动的几种方法,清除浮动的注意事项有哪些,下面就是实战案例,一起来看一下。

html

    <p>
        <p class=&#39;box-left&#39;></p>
        <p class=&#39;box-right&#39;></p>
    </p>

css

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

第一种方法:.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}

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS画出红色爱心

display和visibility的使用区别

在CSS实现Footer置底的几种方式

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

Kenyataan:
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 sebelumnya:CSS与HTML常见的使用误区Artikel seterusnya:html+css中的四种隐藏方式