4种清除浮动的方式

清除浮动

​ 所谓清除浮动其实就是清除在子元素浮动,父元素没有设置高度的情况下会引起父元素高度为0的影响。

  1. 额外标签法:

    <p style="clear:both;"></p>
    

    缺点是每清除一个浮动要加一个标签,很麻烦,而且会产生多余的空标签,不注意时会影响到布局

  2. 直接给父元素加 overflow:hidden;

    tps:万能老司机清除浮动,(其实就触发BFC),缺点是overflow作用在很多地方,会影响其他布局,使用的时候要注意,不建议使用。

    BFC:全称 Block Formatting Context(块级格式化上下文),是一个隐含的属性。

    满足以下一个或多个条件时可以触发

    1、float的值不是none。
    2、position的值不是static或者relative。
    3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    4、overflow的值不是visible

    BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

  3. 伪元素清除法(推荐的方法,不会产生多余的空标签)

    1. 使用方式:在父元素的类名后加上清除浮动的类名或者直接在父级类名后加伪元素

      <div class="box clearfix"></div>
      
    .clearfix:before{
    
        concent:' ';
    
         display:table;
           clear:both;
    
        height:0px;
    
    }
    或者:
    .clearfix:after{
    
        concent:' ';
    
         display:table;
           clear:both;
    
        height:0px;
    
    }
    
    兼容IE的写法:
    .clearfix{
    
    *zoom: 1 ;
    
    }
    

    4.双伪元素清除法:

    .clearfix:before,.clearfix:after{
    
        concent:' ';
    
         display:table;
           clear:both;
    
        height:0px;
    
    }
    

    使用方式:在父元素的类名后加上清除浮动的类名或者直接在父级类名后加伪元素

    <div class="box clearfix"></div>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值