BFC
BFC
一、BFC是什么？
在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化）、 Context（上下文）== 块级格式化上下文 的概念。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
A.它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
B.块级元素：父级（是一个块元素）
C.内容：子元素（是一个块元素）
D.其他元素：与内容同级别的兄弟元素
E.相互作用：BFC里的元素与外面的元素不会发生影响
二、触发条件：
触发BFC的方式（以下任意一条就可以）
1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、tabble-caption和inline-block之一
4、position的值为absolute和fixed之一
三.BFC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度；
2.非浮动元素会覆盖浮动元素的位置；
3.给子级添加margin-top会传递给父级；
4.两个相邻元素上下margin会重叠；
BFC布局规则
- 浮动的元素会被父级计算高度；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.div1{
background:red;
}
.div2{
width:100px;
height:100px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
运行结果：此时出现了高度塌陷问题
解决方法：父级元素添加overflow:hidden触发了BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.div1{
background:red;
overflow: hidden;
}
.div2{
width:100px;
height:100px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
运行结果：
2.非浮动元素不会覆盖浮动元素位置
（1）、 两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.div1{
width:100px;
height:100px;
background:red;
float:left;
}
.div2{
width:200px;
height:500px;
background:blue;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
运行结果：此时出现了非浮动元素覆盖浮动元素位置问题
解决方法:给非浮动元素加overflow：hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.div1{
width:100px;
height:100px;
background:red;
float:left;
}
.div2{
width:200px;
height:300px;
background:blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
运行结果：
（2）、圣杯布局
解决方法同上：给非浮动元素加overflow：hidden;
3.margin不会传递给父级（父级触发了BFC）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.div1{
width:200px;
height:200px;
background:red;
}
.div2{
width:100px;
height:100px;
background:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
运行结果：出现了子元素的margin值传递给了父元素的问题；
解决方法:
第一种：给父元素添加overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.div1{
width:200px;
height:200px;
background:red;
overflow: hidden;
}
.div2{
width:100px;
height:100px;
background:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
运行结果：
第二种:给父元素添加边框；
第三种:给父元素添加浮动；
4.两个相邻元素上下margin不会重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.div1{
width:100px;
height:100px;
background:red;
margin-bottom: 10px;
}
.div2{
width:100px;
height:100px;
background:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
运行结果：出现了两个相邻元素上下margin重叠的问题；
解决方法：
第一种:给其中的一个子元素添加display：inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.div1{
width:100px;
height:100px;
background:red;
margin-bottom: 10px;
}
.div2{
display: inline-block;
width:100px;
height:100px;
background:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
运行结果：
第二种:给其中一个元素增加一个父级，然后给他的父级添加overflow：hidden触发BFC;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
overflow: hidden;
}
.div1{
width:100px;
height:100px;
background:red;
margin-bottom: 10px;
}
.div2{
width:100px;
height:100px;
background:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
</html>
运行结果：