请描述 BFC(BLOCK FORMATTING CONTEXT) 及其如何工作

1.背景介绍


什么是BFC

Block Formatting Context,中文直译为块级格式上下文。

BFC就是一种布局方式,在这种布局方式下,盒子们自所在的containing block顶部一个接一个垂直排列,水平方向上撑满整个宽度(除非内部盒子自己建立了新的BFC)。 两个相邻的BFC之间的距离由margin决定。在同一个BFC内部,两个垂直方向相邻的块级元素的margin会发生“塌陷”。
这里也间接指出了垂直相邻盒子margin合并的解决办法:就是给这两个盒子也创建BFC。
BFC的特点就是,内部和外部相互独立,互不影响

2.知识剖析
BFC布局规则
1、内部的Box会在垂直方向,一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、 BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时,浮动元素也参与计算

3.常见问题
有哪些方式能够触发BFC模式呢?
BFC有哪些应用?

4.解决方案
有哪些方式能够触发BFC模式呢
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-blcok、table-cell、table-caption、flex、inline-flex
5、overflow不为visible
BFC有哪些应用?
1. 清除内部浮动
我们在布局时经常会遇到这个问题:对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2. 垂直MARGIN合并
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。 折叠的结果:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个外边距一正一负时,折叠结果是两者的相加的和。这个同样可以利用BFC解决
3. 创建自适应两栏布局
在很多网站中,我们常看到这样的一种结构,左图片+右文字的两栏结构。
如何创建BFC
float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption

5.编码实战

6.扩展思考
BLOCK FORMATTING CONTEXT在产生什么作用
1.Block Formatting Context可以阻止边距折叠(margin collapsing)。
2.Block Formatting Context可以包含内部元素的浮动

7.参考文献

8.更多讨论

BFC还有哪些应用?


三个问题:

1.有哪些方式能够触发BFC模式呢?

答:

1、根元素
2、FLOAT属性不为NONE
3、POSITION为ABSOLUTE或FIXED
4、DISPLAY为INLINE-BLCOK、TABLE-CELL、TABLE-CAPTION、FLEX、INLINE-FLEX
5、OVERFLOW不为VISIBLE

2.BFC有哪些应用?

1. 清除内部浮动
我们在布局时经常会遇到这个问题:对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置OVERFLOW:HIDDEN。
2. 垂直MARGIN合并
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。 折叠的结果:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个外边距一正一负时,折叠结果是两者的相加的和。这个同样可以利用BFC解决

3.元素被浮动元素覆盖

答:第二个元素触发BFC,可用于左列定宽,右列自适应的两列布局。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值