共计 704 个字符，预计需要花费 2 分钟才能阅读完成。
好买网 goodmai。com IT 技术交易平台
1.BFC 含意💳
BFC 全称：Block Formatting Contexts 块级元素格式化上下文
W3C CSS 2.1 标准中的一个概念, 它是一个独立容器，决定了块级元素如何对它的内容进行布局，以及与其余元素的关系和互相关系
一个页面是由很多个 Box 组成的, 元素的类型和 display 属性, 决定了这个 Box 的类型，不同类型的 Box，会参加不同的 Formatting Context（决定如何渲染文档的容器）
BFC 外部的元素和内部的元素不会相互影响~~🎈
2.BFC 触发条件🔨
满足以下条件之一就可触发 BFC
根元素
float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed
3.BFC 布局规定🔒
浮动的元素会被父级计算高度（父级触发了 BFC）
非浮动元素不会笼罩浮动元素地位（非浮动元素触发了 BFC）
margin 不会传递给父级（父级触发了 BFC）
属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠
BFC 是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素
计算 BFC 的高度时，浮动元素也会参加计算
BFC 的区域不会与 float box 重叠
3.BFC 作用🔧
◾ 1）自适应两栏布局
◾ 2）能够阻止元素被浮动元素笼罩
◾ 3）能够革除外部浮动
◾ 4）能够阻止 margin 重叠
BFC 在前端页面布局中非常常见也灰常重要~
本文来自博客园，作者：不出名前端李小白，转载请注明原文链接：https://www.cnblogs.com/libo-…
