CSS中清除浮动的几种方法-css教程-PHP中文网

CSS中清除浮动的几种方法

迷茫

发布： 2017-03-25 11:16:49

原创

1683人浏览过

一、clear:both;

这种方法有一个问题：margin失效。

二、隔墙法

    <p class="box1">
    </p>
    <p class="cl hl"></p> /*墙*/
        <p class="box2">
    </p>

登录后复制

    cl{
        clear: both;
    }
    .hl{
        height: 16px;
    }

登录后复制

演化出的“内墙法”

<p>
    <p></p>
    <p></p> /*两个p都浮动，所以p不会被撑出高*/
    <p class="cl"></p> /*在家里建一堵墙就能让儿子给p撑出高*/
</p>

登录后复制

注意：一般不使用此方法，会增加页面标签。

三、overflow:hidden;

本意就是清除溢出到盒子外面的文字。但是，它能作为偏方来清除浮动。
注意：一般不使用此方法，因为溢出这个元素所在的区域会被隐藏。

百堂数字点卡程序

商品分类、分级，可以销售各种游戏、娱乐卡，甚至电话卡等1、方便简洁的购卡、显示卡号流程 2、自动从预付款中扣除金额，自动显示卡号等3、帐户余额显示、提醒4、历史订单管理、浏览5、会员密码加密，增强系统的安全性6、商品订单明细清晰，应付款项清楚7、后台处理提供商品统计、分析能力，帮助决策8、商品显示顺序可自己设定，如按价格倒序、升序，按购买量升序、倒序等等9、即时显示卡号或密码，零等候时间。

查看详情

立即学习“前端免费学习笔记（深入）”；

四、使用伪元素

.clearfix:after {
    　　　　content: '';
   　　　　 height: 0;
   　　　　 line-height: 0; /*或 overflow:hidden*/
    　　　　display: block;
    　　　　visibility: hidden;
    　　　　clear: both;
　　　　}
　　　　.clearfix {
   　　　　 zoom: 1;  /*兼容ie6*/
　　　　}

登录后复制

五、双伪元素标签

页面上不存在的元素可以通过css添加上去，每个元素都有自己的伪元素。

　　　　.clearfix:before,.clearfix:after {
   　　　　 content: '';
   　　　　 display: table;
　　　　}
　　　　.clearfix:after {
    　　　　clear: both;
　　　　}
　　　　.clearfix {
  　　　　  zoom: 1;
　　　　}

登录后复制

以上就是CSS中清除浮动的几种方法的详细内容，更多请关注php中文网其它相关文章！