首先BFC是什么?
这里BFC不是KFC，不是UFO，CPU，PTU
- 所谓
BFC，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。 BFC全称：Block Formatting Context， 名为 "块级格式化上下文"BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。BFC可以看做是一个CSS元素属性
如何触发BFC
触发BFC的css属性
- overflow: hidden / auto / scroll
- dispaly: inline-block / table-cell
- 浮动
- position: absolute / fixed / flex
BFC的规则
BFC就是一个块级元素，块级元素独占一行，向下一行一行的排列BFC是一个独立的空间，空间内部元素和外部不受影响- 垂直方向的距离是由margin外边距来来控制，如果在同一个
BFC环境下相邻的两个盒子的margin距离会重叠并且取最大值 BFC的高度由内容高度决定
用BFC解决了一些什么问题
盒子设置的浮动（float）脱离文档流,父盒子会产生高度塌陷问题，高度不计算
修改前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#fatherBox {
margin: 100px;
width: 300px;
background-color: #000;
}
.son1Box {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.son2Box {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<div id="fatherBox">
<div class="son1Box">sonBox1</div>
<div class="son2Box">sonBox2</div>
</div>
</body>
</html>
代码效果
可以看到上面效果给
son1rBox、son2Box设置完float结果脱离文档流，使fatherBox高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给fatherBox触发BFC，上面我们所说到的触发BFC属性都可以设置。
修改后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#fatherBox {
margin: 100px;
width: 300px;
background-color: #000;
// 触发BFC
display：inline-block;
}
.son1Box {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.son2Box {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<div id="fatherBox">
<div class="son1Box">sonBox1</div>
<div class="son2Box">sonBox2</div>
</div>
</body>
</html>
代码效果
margin边距重叠
修改前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin边距重叠</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* margin边距重叠 */
#fatherBox {
margin: 100px;
width: 300px;
background-color: #000;
}
#fatherBox .son1Box,
#fatherBox .son2Box {
width: 100%;
height: 200px;
background-color: red;
}
.son1Box {
margin-bottom: 10px;
}
.son2Box {
margin-top: 20px;
}
</style>
<body>
<div id="fatherBox">
<div class="son1Box">sonBox1</div>
<div class="son2Box">sonBox2</div>
</div>
</body>
</html>
代码效果
可以看到
son1Box盒子设置margin-bottom属性值为10px，son2Box盒子设置margin-top属性值为20px，但是两个盒子之间的外边距只有20px。这就是margin边距发生了重叠并且取最大值做为边距值
修改后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin边距重叠</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* margin边距重叠 */
#fatherBox {
margin: 100px;
width: 300px;
background-color: #000;
}
#fatherBox .son1Box,
#fatherBox .son2Box {
width: 100%;
height: 200px;
background-color: red;
display: inline-block;
}
.son1Box {
margin-bottom: 10px;
}
.son2Box {
margin-top: 20px;
}
</style>
<body>
<div id="fatherBox">
<div class="son1Box">sonBox1</div>
<div class="son2Box">sonBox2</div>
</div>
</body>
</html>
代码效果
经过将子盒子
son1Box、son2Box样式中添加display: inline-block属性，由于只有块级元素才会有外边距，所以直接将子盒子改为行内块级元素就可以了
总结
多学习、多看报、少吃零食多睡觉
本文参考
- [部分参资料：](面试官：请说说什么是BFC？大白话讲清楚 - 掘金 (juejin.cn))
