首先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))