BFC

BFC就是“块级格式化上下文”的意思,简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境,保护其中内部元素不受外部影响,也不影响外部。

1.BFC触发的几种方式:

  1. 浮动元素,float 除 none 以外的值;
  2. 绝对定位元素,positionabsolutefixed);
  3. display 为以下其中之一的值 inline-block,table-cell,table-caption;
  4. overflow 除了 visible 以外的值(hiddenauto

 

2.BFC的应用

  1. 可以用来自适应布局

利用BFC的这个原理可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。

给左边盒子加浮动,右边盒子加overflow:hidden;变成BFC,就可以消除外部左边盒子因浮动对他的影响

  1. 可以清除浮动

一个父元素中的子元素,设置浮动时,父元素没有设置高度,这时子元素脱离文档流,父元素感知不到子元素的高度,造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

  1. 解决垂直边距重叠

有两种边距重叠的情况:

1.父子关系的边距重叠

父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。

解决办法是给父元素添加一个 overflow:hidden,这样父元素就变为BFC,不会随子元素产生外边距

2.同级兄弟关系的重叠

同级元素在垂直方向上外边距会出现重叠现象,最后外边距的大小取两者绝对值大的那个

可通过添加一个空元素或伪类元素,设置overflow:hidden;解决

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值