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等。
00
相似问题
rAF和setInterval的区别
回答 1
有几个问题
回答 1