什么是BFC?
BFC全称是Block Formatting context，翻译过来就是块级格式化上下文。简单来说，BFC是一个==完全独立==的空间。让空间里的子元素不会影响到外面的布局。😃😃😃
如何触发BFC呢？
mdn给了如下方式：😃
Introduction to formatting contexts 格式化上下文简介 - CSS：层叠样式表 | MDN (mozilla.org)
html 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC
除了文档的根元素html之外，还将在以下情况下创建一个新的 BFC：
- 使用
float使其浮动的元素 - 绝对定位的元素 (包含
position: fixed或position: sticky - 使用以下属性的元素
display: inline-block - 表格单元格或使用
display: table-cell, 包括使用display: table-*属性的所有表格单元格 - 表格标题或使用
display: table-caption的元素 - 块级元素的 overflow 属性不为
visible - 元素属性为
display: flow-root或display: flow-root list-item - 元素属性为
contain: layout,content, 或strict - flex items
- 网格布局元素
- multicol containers
- 元素属性
column-span设置为all
BFC的规则😃
- BFC也就是块级元素，会在竖直方向上依次排列。
- BFC就是页面上一个独立的容器，容器的标签不会影响到外面布局
- 垂直方向的距离会重叠，属于同一个
BFC的两个外标签会发生重叠。- 计算
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>Document</title>
<style>
.outer{
background-color: black;
}
.box1{
width: 100px;
height: 300px;
float: left;
background-color: skyblue;
}
.box2{
width: 100px;
height: 300px;
float: left;
margin-left: 10px;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
可以看见，因为背景色没有黑色，所以并没有被撑开。
修改代码后
.outer{
background-color: black;
overflow: hidden;
}
此时，浮动中的高度塌陷就被解决了。
外边距合并问题(只处理嵌套模块合并问题)
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 200px;
background-color: pink;
margin-top: 10px;
}
.box2 {
width: 200px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
修改代码后
.box1 {
width: 300px;
height: 200px;
background-color: pink;
overflow: hidden;
margin-top: 10px;
}
双栏布局问题
引发这个问题的原因==主要是浮动的特性。==
浮动和绝对定位一样，都会脱离文档流，但是浮动与绝对定位不一样的是浮动脱离文档流后，其余的盒子的文字显示会避开浮动元素，绝对定位就相当于飘到天上去了。但是浮动算是半票。对此，双栏布局也有这个问题。文字被浮动元素挤下去了。例如
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 300px;
}
.left{
width: 200px;
float: left;
background-color: salmon;
}
.right{
width: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div>
<div class="right">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div>
</div>
</body>
</html>
呈现出来的是这种效果，显然这种效果是不好的。对此，解决办法就是BFC.
修改代码
.right{
width: 300px;
background-color: lightblue;
overflow: hidden;
}
对此，BFC讲解到这里。如果有更深的理解，可以在下方提提想法！！😃😃😃
