contain 和 BFC 有什么区别呢？

Question

块格式化上下文（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

Answer 1

Mr_Max 2020-11-24 00:56:40

同学你好！

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

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

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