CSS盒模型（标准模型、IE模型）
触发BFC场景
- 根元素或包含根元素的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 strict 的元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
代码效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec {
background-color: red;
overflow: hidden;
}
.child {
margin-top: 20px;
height: 100px;
background-color: yellow;
}
</style>
<article class="child">
</article>
</section>
<!-- BFC垂直方向边距重叠 -->
<section id="margin">
<style>
#margin {
background: pink;
overflow: hidden;
}
#margin p {
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<h1 style="height: 40px;">BFC不与float重叠</h1>
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
overflow: auto;
/* 创建bfc */
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
<!-- BFC子元素即使是float也会参与计算 -->
<h1 style="height: 40px;">BFC子元素即使是float也会参与计算</h1>
<section id="float">
<style media="screen">
#float {
background: red;
overflow: auto;
/* float: left; */
}
#float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
<div>直接在-BFC不与float重叠-元素下</div>
</body>
</html>
