前端布局中的几个常见概念(FC、BFC)

写前端的同学都知道CSS盒模型概念,进行CSS布局时,我们常常需要确定一个元素时block类型的块元素还是inline类型的内联元素。FC、BFC、IFC这些概念就和这些元素类型相关。

FC:Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。

BFC:Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。


BFC产生的条件:

1.html根元素

2.float的值不为none

3.display的值为inline-block、table-cell、table-caption

4.position的值为absolute或fix


BFC约束规则:

1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠,同属一个BFC的两个相邻Box的margin会发生重叠。

2.生成BFC元素的子元素中,每一个子元素左外边距与包含块的左边界接触,即使浮动元素也是如此(除非这个子元素自身也是一个浮动元素)。

3.BFC的区域不会与float的元素区域重叠。

4.计算BFC高度时,浮动元素也参与计算。

5.BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。

我们在写css常见的一些问题都可以由上面两条推出,例如:

1.Block元素与父元素同宽,所以Block元素竖直方向上垂直排列。

2.竖直方向上有的Block元素margin会重叠,水平方向不会。

3.浮动元素会尽量接近左上方或右上方。

4.为父元素设置overflow:hidden或浮动父元素,则父元素会包含其浮动的子元素。


BFC有很多实际的用处,例如防止相邻block的竖直margin重叠(塌陷),这个以后在总结一篇关于margin的来说。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值