清除浮动原理、clear原理、bfc原理

一、clear

clear 属性定义了元素的哪边上不允许出现浮动元素。并不是将浮动元素变成了非浮动的,而是将该元素左右的浮动元素放到下一行。

 left :在左侧不允许浮动元素
right :在右侧不允许浮动元素
both :在左右两侧均不允许浮动元素
none:默认。允许浮动元素出现在两侧。

推荐使用伪元素方式清除浮动,代码如下

.clearfix{
    zoom: 1;/*zoom:1 触发IE hasLayout。*/
    &::after{
      content: " 111";
      display: block;
      clear: both;
      font-size: 0;
      height: 0;
      visibility: hidden;
    }
}

after伪元素会在内容的最后加入元素,通过 content:"XXX" 生成内容作为最后一个元素,然后给该伪元素设置clear来清除浮动使父元素框撑开,设置伪元素为块级内容撑开剩余空间,同时使用visibility来隐去加入的内容。

二、bfc原理

也可以通过给父级元素增加overflow:hidden来清除浮动

使用这个方法即触发了bfc,bfc是什么呢?

BFC(Block Formatting Context )块级格式化上下文,是css布局的一个概念。是一块独立的渲染区域,里面的元素不会影响到外部的元素,外部的元素不会影响里面的元素。HTML标签就是最大的一个bfc区域。

BFC原理(布局规则)

  • 内部的box会在垂直方向,从顶部开始一个接一个的放置
  • box垂直方向的距离由margin决定,属于同一个bfc的两个相邻的box的margin会发生重叠
  • 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠(清浮动
  • 计算BFC的高度时,浮动子元素也参与计算

 触发BFC的方式

  1.  根元素,HTML
  2. 浮动,float的值不是none
  3. 绝对定位元素 position的值为absolute或者fixed
  4. 行内块 display为inline-block
  5. 表格单元 display为table,table-cell,table-caption等
  6. 弹性盒 display为flex、inline-flex
  7. overflow的值不为visible

 bfc的使用场景

  1. 清除浮动
  2. 自适应两栏布局
  3. 去除margin重叠现象,分属于不同的bfc时,可以避免margin重叠

 不推荐使用overflow来清除浮动的原因为,极有可能会导致超出的元素被隐藏,或者出现滚动条从而影响美观。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值