一、什么是BFC？
BFC是页面上的独立渲染区域
二、BFC产生规则
1、根标签(body)
2、float的值不为none
3、overflow的值不为visible
4、display的值为inline-block
5、position的值为absolute或fixed
三、BFC的特性
1、垂直方向排列。（类似块级特性）
2、BFC内部每个内部标签都会与左边界相接触。（类似块级特性）
3、属于同一个BFC的两个块元素，垂直margin兄弟关系会折叠（正数以大值为准，有负数正常加减），父子关系会塌陷。
4、BFC区域不会与float的标签区域重叠。
5、浮动的标签也会被计算BFC高度。
6、BFC是独立容器，内部标签不会影响到外部标签。
四、可以解决的问题
1、外边距折叠/塌陷：
父子关系在父级加overflow:hidden，兄弟关系给其中一个兄弟设置成独立的BFC。
2、自适应两栏或三栏布局
两栏：左边固定高度设置float，右边不设宽设置BFC
<html>
<head>
<style>
.left {
width: 100px;
height: 400px;
background: red;
float: left;
}
.right {
height: 500px;
background: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>三栏：左右固定高度设置float，中间不设宽设置BFC
<html>
<head>
<style>
.left {
float: left;
height: 500px;
width: 150px;
background: red;
}
.center {
height: 600px;
background: blue;
overflow: hidden;
}
.right {
float: right;
height: 500px;
width: 150px;
background: yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>3、防止文字环绕
给文字设置成BFC可以解决文字环绕
4、清除浮动
给父级设置成BFC可以清除浮动，浮动的标签也会被计算BFC高度。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！