BFC （block formatting context） 及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC相当于构建了一个密闭的盒子模型，在BFC中的元素不受外部元素的影响；
个人理解：BFC就是将盒子中子元素的属性锁在父元素中，例如margin,float 使其不影响盒子外的元素。
以下情况都会使元素产生BFC
- 根元素或其它包含它的元素 (也就是html元素本身就是BFC)
- float:left ,right
- position:absolute,fixed
- display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
- overflow：hidden，auto，scroll （非 visible属性）
- display: flow-root
- column-span: all
1. 解决高度塌陷
由于浮动元素脱离了文档流，普通盒子是无法包裹住已经浮动的元素；父级元素的高度为0；
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 * { box-sizing: border-box; }
8
9 .outer {
10 background-color: #ccc;
11 width: 200px;
12 }
13 .outer div{
14 width: 100px;
15 margin: 10px 20px;
16 background-color: red;
17 width: 100px;
18 height: 100px;
19 }
20
21 </style>
22</head>
23<body >
24 <div class="outer ">
25 <div style="float: left;"></div>
26 </div>
27</body>
28</html>当子元素浮动 父级获取不到浮动元素的高度，造成高度塌陷
当父元素转变为BFC时，浮动元素被包裹住：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 * { box-sizing: border-box; }
8
9 .outer {
10 background-color: #ccc;
11 width: 200px;
12 overflow: hidden; //转变为BFC
13 }
14 .outer div{
15 width: 100px;
16 margin: 10px 20px;
17 background-color: red;
18 width: 100px;
19 height: 100px;
20 }
21
22 </style>
23</head>
24<body >
25 <div class="outer ">
26 <div style="float: left;"></div>
27 </div>
28</body>
29</html>2.浮动重叠
当一个元素浮动，后面的元素没浮动，那么后面的元素就会与浮动元素发生重叠
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 * { box-sizing: border-box; }
8
9 .outer {
10 background-color: #ccc;
11 width: 200px;
12 overflow: hidden;
13 }
14 .outer div{
15 width: 100px;
16 margin: 10px 20px;
17 background-color: red;
18 width: 100px;
19 height: 100px;
20 }
21
22 </style>
23</head>
24<body >
25 <div class="outer ">
26 <div style="float: left;"></div>
27 <div ></div>
28 </div>
29</body>
30</html>后一个元素 与前一个浮动元素发生重叠
根据BFC不与浮动元素重叠的特性，为没有浮动的元素创建BFC环境
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 * { box-sizing: border-box; }
8
9 .outer {
10 background-color: #ccc;
11 width: 200px;
12 overflow: hidden;
13 }
14 .outer div{
15 width: 100px;
16 margin: 10px 20px;
17 background-color: red;
18 width: 100px;
19 height: 100px;
20 }
21
22 </style>
23</head>
24<body >
25 <div class="outer ">
26 <div style="float: left;"></div>
27 <div style="overflow: hidden;"></div>
28 </div>
29</body>
30</html>3.边距重叠
边距重叠分为两种情况
- 父子重叠
1当 父级没有
2- 垂直方向的border，
3- 垂直方向 padding，
4- 父级不是内联元素，
5- 父级不是BFC,
6- 父级没有清除浮动，
7
8这五个条件时，子元素的上下边距会和父级发生重叠
9<!DOCTYPE html>
10<html lang="en">
11<head>
12 <meta charset="UTF-8">
13 <title>Document</title>
14 <style>
15 * { box-sizing: border-box; }
16
17 .outer {
18 background-color: #ccc;
19 width: 200px;
20 }
21 .outer div{
22 width: 100px;
23 margin: 10px 20px;
24 background-color: red;
25 width: 100px;
26 height: 100px;
27 }
28
29 </style>
30</head>
31<body >
32 <div class="outer ">
33 <div></div>
34 </div>
35</body>
36</html>解决办法：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 * { box-sizing: border-box; }
8
9 .outer {
10 background-color: #ccc;
11 width: 200px;
12 /*padding: 1px;*/ 加padding
13 /*border: 1px solid yellow;*/ 加border
14 /*display: inline-block;*/ 内联块
15 /*overflow: hidden;*/ BFC
16 }
17 .clearfix:after{ 清除浮动
18 content: '';
19 display: table;
20 clear:both;
21 }
22 .outer div{
23 width: 100px;
24 margin: 10px 20px;
25 background-color: red;
26 width: 100px;
27 height: 100px;
28 }
29
30 </style>
31</head>
32<body >
33 <div class="outer clearfix">
34 <div></div>
35 </div>
36</body>
37</html>- 兄弟重叠
当两个元素的垂直边距相互接触时，两者边距会发生合并，合并的规则为
1- 如果是正数比大小，大的覆盖小的
2- 都为负数比绝对值大小，大的覆盖小的
3- 正负都有取其差
4
51.将两个元素浮动
62.将两个元素display：inline-block
7<!DOCTYPE html>
8<html lang="en">
9<head>
10 <meta charset="UTF-8">
11 <title>Document</title>
12 <style>
13 * { box-sizing: border-box; }
14
15 .outer {
16 background-color: #ccc;
17 width: 200px;
18 overflow: hidden;
19 }
20 .outer div{
21 width: 100px;
22 margin: 10px 20px;
23 background-color: red;
24 width: 100px;
25 height: 100px;
26 /*下面两种方式*/
27 float: left;
28 display: inline-block;
29 }
30 </style>
31</head>
32<body >
33 <div class="outer ">
34 <div ></div>
35 <div ></div>
36 </div>
37</body>
38</html>其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果，完全没有必要去使用上面的两个方法。
个人笔记记录 2021 ~ 2025