深入理解：BFC究竟是什么？
在我们了解BFC之前，我们先来看看什么是FC
1. FC的概念
FC全称 Formatting Context ,元素在标准流里面都属于一个FC
- 块级元素的布局都属于Block Formatting Context,也就是BFC
- block level box都是在BFC中布局的
- 行内级元素的布局都属于Inline Formatting Context，IFC
2. BFC - Block Formatting Context
2.1 什么是BFC呢？怎么创造BFC？
常见的形成BFC的场景
- 根元素（html,:root）
- 浮动元素（float属性部位none）
- 绝对定位元素（absolute或fixed）
- 行内快元素（display为inline-block）
- 表格单元格（元素的display为table-cell(默认)）
- 表格标题（display为table-caption）
- 匿名表格单元格格式（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow属性值不是“visible”的元素
- 弹性元素（flex布局）
- 网格元素（gird布局）
2.2 BFC的作用
- 在BFC中，box会垂直方向上一个挨着一个排布
- 垂直方向的属性由magin决定
- 同一个BFC中，两个相邻的box上下之间的margin会折叠（规定）
- BFC中，每个元素的左侧边缘都是紧挨着包含块的左边缘
这就是浏览器如何排布我们的元素
2.3 利用BFC解决块级元素的margin上下折叠问题
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: pink;
margin-bottom: 50px;
}
.box2 {
margin-top: 30px;
background-color: purple;
}
<div class="box box1"></div>
<div class="box box2"></div>
在上述的代码中，box1和box2在同一个BFC中，（根元素html）会创建一个BFC，所以会折叠，两个box之间的距离为50px,我们可以利用BFC来解决这个问题
<div class="container">
<div class="box box1"></div>
</div>
<div class="box box2"></div>
用一个div盒子来包裹box1
.container {
overflow: auto;
}
当我们给box1的父盒子container设置overfolw的属性为auto时，此时container会开启一个BFC，此时，box1和box2并不是属于同一个BFC，所以不会出现margin上下折叠的问题
2.4 为什么BFC会解决浮动元素高度塌陷的问题呢？
网上有很多的说法，BFC可以解决浮动元素的塌陷问题，实现清除浮动的效果，那么请看这个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.box ul {
width: 330px;
height: 150px;
background-color: orange;
overflow: hidden;
}
.box li {
float: left;
width: 100px;
height: 100px;
margin: 0 10px 10px 0;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
在这个案例中，我们给了ul 一个固定高度，也给ul设置了一个BFC，但并没有清除浮动
事实上，BFC解决高度塌陷的需要满足两个条件
- 浮动元素的父元素开启BFC
- 浮动元素的父元素高度是auto
当BFC的高度为auto时，将会计算父元素的高度（权威）
- 如果盒子中的子元素只有行内元素，直接计算顶部到底部的距离
- 如果有块级元素，计算块级元素的高度
- 如果有绝对定位元素，直接忽略其高度
- 如果有浮动元素，则会增加高度来包含这些浮动元素的下边缘
也就是我们可以得出一个重要结论，当元素开启新的BFC时，会主动将浮动元素给包括进去，并不是浮动元素向父元素汇报高度
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
