首页 >web前端 >css教程 >清除浮动的几种方法

清除浮动的几种方法

php中世界最好的语言
php中世界最好的语言原创
2018-03-22 11:43:112532浏览

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

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置底的几种方式

以上是清除浮动的几种方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn