1. 概念
- BFC是
Block Formatting Context（块级格式化上下文），元素的“特异功能”。 - 该
“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。 - 所谓激活
“特异功能”，专业一点说就是：该元素创建了BFC（又称：开启了BFC）。
2. 开启BFC能够解决什么问题
- 元素开启 BFC 后，其子元素不会产生 margin 塌陷问题。
- 元素开始 BFC 后，自己不会被其他浮动元素所覆盖。
- 元素开始 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
margin 塌陷问题：父元素会剥夺第一个子元素的 margin-top,和最后一个元素的 margin-bottom
3. 如何开启BFC
- 根元素 -
html(本身就开启了BFC) - 浮动元素 -
float:left; 或者 float:right; - 绝对定位、固定定位的元素 -
position: absolute;position: fixed; - 行内块元素 -
display: inline-block; - 表格单元格：
table、thead、tbody、tfoot、th、td、tr、caption overflow的值不为visible元素- 伸缩项目- flex布局
- 多列容器
column-span为all的元素（即使该元素没有包裹在多列容器中）display的值，设置为flow-root（副作用最低，但是IE不支持）
4. 例子
4.1 BFC_演示1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_BFC_演示1</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 解决塌陷问题 */
/* body{
display: flex;
} */
/* outer 变为伸缩项目，它的父级得变为display:flex;（伸缩容器） */
.outer {
width: 400px;
background-color: #888;
/* 解决margin塌陷的一种手段，但是没有开启BFC */
border: 1px solid black;
/* 以下都开启了BFC */
/* float: left; */
/* position: absolute; */
/* position: fixed; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: auto; */
/* 多列容器 */
/* column-count: 1; */
/* column-span: all; */
/* display: flow-root; */
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: deepskyblue;
}
</style>
</head>
<body>
<h1>1. 元素开启 BFC 后，其子元素不会产生 margin 塌陷问题。</h1>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>
4.2 BFC_演示2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_BFC_演示2</title>
<style>
/* * {
padding: 0;
margin: 0;
} */
/* body{
display: flex;
} */
.box{
width: 100px;
height: 100px;
}
.box1{
background-color: aqua;
float: left;
/* box1 盖在了box2上 */
}
.box2{
background-color: violet;
/* 以下都开启了BFC */
float: left;
/* position: absolute; */
/* position: fixed; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: auto; */
/* 多列容器 */
/* column-count: 1; */
/* column-span: all; */
/* display: flow-root; */
}
</style>
</head>
<body>
<h1>2. 元素开始 BFC 后，自己不会被其他浮动元素所覆盖。</h1>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
4.3 BFC_演示3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_BFC_演示3</title>
<style>
* {
padding: 0;
margin: 0;
}
/* body{
display: flex;
} */
/* outer 变为伸缩项目，它的父级得变为display:flex;（伸缩容器） */
.outer {
width: 400px;
background-color: #888;
/* 以下都开启了BFC */
/* float: left; */
/* position: absolute; */
/* position: fixed; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: auto; */
/* 多列容器 */
/* column-count: 1; */
/* column-span: all; */
display: flow-root;
}
.inner {
width: 100px;
height: 100px;
float: left;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
</style>
</head>
<body>
<h1>3. 元素开始 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。</h1>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
</html>
