BFC（Block Formatting Context）是CSS布局中的关键概念，用于隔离元素间的相互影响。通过创建BFC，可以解决同一BFC内元素margin重叠问题，实现清除浮动效果，以及构建自适应两栏布局。创建BFC的方法包括设置display属性、float、position和overflow等。了解并掌握BFC，能有效提升网页布局的控制能力。
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC的作用以及如何创建一个BFC
创建一个BFC
- 设置diplay为：inlin-block;
table、table-row、table-row-group、table-header-group、table-footer-group、table-caption、flex、grid 、flow-root、 - 设置float 不包括none值
- 设置position为absolute、fixed
- 设置overflow不为visible
- 根元素（
<html>）
常见用途：
1.magin重叠问题
同一个BFC中的两个元素的margin会重叠
解决办法：创建一个BFC包围元素 如 display:inline; overflow:hidden; dispaly:flow-root
2.清除浮动
子元素浮动，父元素设置为BFC如overflow:hidden;dispaly:flow-root
3.自适应两栏布局
BFC元素不会与浮动元素重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
