聊聊CSS中的BFC | 青训营笔记

·  阅读 737

这是我参与「第四届青训营 」笔记创作活动的的第1天

什么是BFC?

块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

简而言之,BFC就是一个隔离的独立容器,其内部元素不受外部元素布局影响,反之也一样。

BFC有哪些表现呢?

  • 其内部的块级元素会在垂直方向一个接一个的排列;
  • 属于同一BFC的相邻盒子外边距会发生重叠(以外边距大的为主);
  • BFC不会与浮动元素重叠,并且可以包含浮动元素。

如何创建BFC?

以下是常见的创建BFC的CSS属性,满足任意一点即可:

  • overflow: hidden
  • float: left/right
  • display: inline-block
  • position: absolute/fixed
  • display: table-cell/flex/grid

BFC解决了什么问题?

高度塌陷

场景还原

从上面的运行结果可以看到,当float盒子设置为浮动时,parent盒子高度坍塌为0,因为浮动元素脱离了文档流。

解决

此时可以通过创建BFC来解决该问题:

当给parent盒子创建BFC后,可以看到parent盒子的高度被float盒子撑开了,原理很简单,因为BFC可以包含浮动元素,计算其高度时会把浮动元素的高度也带上,因此parent的高度自然就可以被撑开啦~

margin边距重叠

场景还原

image.png image.png

从上面图片可以看到,child2盒子的top外边距是被child1的bottom边距覆盖了的,或者说这两个边距合并了。

解决

分别给两个child盒子包裹一个BFC盒子即可,因为两个相邻的BFC不会发生外边距重叠~

其实BFC还有很多用处,这里就不一一列出了

总结

上面两个例子均体现了BFC内部元素不会受到外部元素的布局影响!!

然后BFC高度计算会包含内部浮动元素,另外就是当BFC浮动元素相邻时,浮动元素不会与BFC发生重叠。

参考资料: MDM 格式化上下文

分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改