contain 和 BFC 有什么区别呢?

来源:4-6 CSS对性能的影响 【必会】

落夜星空

2020-11-23

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时,只影响到有限的 DOM 区域,而不是整个页面,可以有效改善性能。
这个属性在包含大量独立组件的页面非常实用,它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain

写回答

1回答

Mr_Max

2020-11-24

同学你好!

举个例子,有时因为浮动的子元素脱离文档流导致布局的问题,出现父元素包不住子元素。最常见的就是在父元素上用overflow: auto;来搞定。其实这就是创建了一个BFC来解决的。

BFC是一个块级布局解决方案的概念,它的实现有很多方式,contain也是其中一种。

BFC就是要让父元素能够按块级布局的方式包含(contain)住子元素的特性---浮动,margin等。


0
0

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线,性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

查看课程