相关术语
三种布局手段: 标准流(normal), 浮动流(float)，定位流(position) BFC: Block Formatting Context, 块级格式化上下文
一、BFC的特点
1. 在BFC区域内只包含其直接子元素, 不包含孙元素以及更下级元素
<div class="bfc-01">
<div class="box-01"></div>
<div class="box-02"></div>
<div class="box-03"></div>
<div class="box-04 bfc-02">
<div class="box-05"></div>
<div class="box-06"></div>
</div>
</div>
如上代码, 包含两个BFC区块, bfc-01,bfc-02, bfc-01的区块只包含box-01,box-02,box-03, box-04, 而box-05,box-06是不包含在bfc-01中的, box-05, box-06属于bfc-02
2. 具有 BFC 特性的元素可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性
==通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。==
二、BFC触发条件
触发BFC必须满足以下条件之一
- 是
body元素 - 设置浮动
float(除none之外的值) - 设置定位
position为:absolute,fixed - 设置
overflow为:hidden,auto,scroll - 设置
display为:flex,table-cell,inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.bfc-01{
overflow: hidden;
}
</style>
</head>
<body>
<div class="bfc-01">
<div class="box-01"></div>
<div class="box-02"></div>
<div class="box-03"></div>
<div class="box-04 bfc-02">
<div class="box-05"></div>
<div class="box-06"></div>
</div>
</div>
</body>
</html>
如上代码，有两个BFC区域:body, bfc-01
body是因为满足body条件
bfc-01是因为满足:overflow:hidden条件
注意: bfc-02并不是BFC区块, 因为不满足BFC的任意条件
BFC可解决的问题
1. 外边距坍塌问题(垂直方向上坍塌)
问题重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.box-01, .box-02 {
width: 300px;
height: 300px;
margin: 30px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box-01"></div>
<div class="box-02"></div>
</body>
</html>
使用
BFC解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.box-01, .box-02 {
width: 300px;
height: 300px;
margin: 30px;
background-color: lightblue;
}
.bfc-fix{
/*满足bfc的触发条件之一，使得这个盒子变成一个bfc区块*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="bfc-fix">
<div class="box-01"></div>
</div>
<div class="bfc-fix">
<div class="box-02"></div>
</div>
</body>
</html>
2. 包含坍塌
问题重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
height: 300px;
background-color: lightblue;
}
.child{
width: 100px;
height: 100px;
background-color: lavender;
margin-top:100px;
}
</style>
</head>
<body>
<div class="parent">
<!--
child设置了margin-top:100px, 预期的效果是child到parent的上外边距为100px，
而实际上的效果变成了parent距离body的外边距为100px, 内部元素的布局影响到了外部元素
-->
<div class="child"></div>
</div>
</body>
</html>
使用BFC解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
height: 300px;
background-color: lightblue;
/*触发parent的bfc*/
overflow: hidden;
}
.child{
width: 100px;
height: 100px;
background-color: lavender;
margin-top:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3.使用BFC清除浮动影响
问题重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
height: 400px;
background-color: lightblue;
}
.child-01{
width: 100px;
height: 300px;
background-color: lavender;
float:left;
}
.child-02{
height: 400px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-01"></div>
<div class="child-02"></div>
</div>
</body>
</html>
BFC解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
height: 400px;
background-color: lightblue;
}
.child-01{
width: 100px;
height: 300px;
background-color: lavender;
float:left;
}
.child-02{
height: 400px;
background-color: lightcoral;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-01"></div>
<div class="child-02"></div>
</div>
</body>
</html>
问题重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
background-color: lightblue;
}
.child{
float:left;
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC测试</title>
<style>
.parent{
width: 300px;
background-color: lightblue;
overflow: hidden;
}
.child{
float:left;
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
