BFC（BlockFormattingContext）是CSS布局中的重要概念，它定义了块级元素如何在页面上排列以及与浮动元素的交互。创建BFC的方法包括浮动、绝对定位、设置overflow等。BFC的主要特点是解决外边距重叠问题、防止父元素高度坍塌以及实现自适应两栏布局。通过理解和利用BFC，开发者能更好地控制网页的视觉呈现。
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
简单来说，BFC我们一般叫做“结界”，就相当于是一个隔绝外界环境的容器，有着自己不同于外界的规矩（布局方式）可以不受外界影响。
那我们怎么创造一个BFC呢？
1.以body为根元素。
2.浮动（float），脱离文档流。
3.绝对定位、固定定位position (absolute、fixed)。
4.inline-block、table-cell、table-caption、flex 非块级的块容器。
5.overflow：hidden、auto、scroll
BFC特点：
1.排列方式自上而下与文档流一致。
2.上下margin外边距重叠现象。
3.BFC高度会加上浮动的高度。
4.不影响外部元素。
BFC作用：
1.防止外边距重叠
将两元素隔绝为两个BFC就可以防止重叠现象。
2.父级高度坍塌问题
子元素浮动，父元素高度坍塌，除了设置高宽，还可设置overflow：hidden，创造一个BFC。
3.自适应两栏布局
任其一侧高宽固定浮动，另一侧只需设置overflow：hidden，触发BFC就不会发生重叠现象。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
