1. BFC
Block format context(BFC)，块级格式上下文。BFC是一个独立的布局环境，BFC内部的元素的渲染不会影响到边界以外的元素。
2. BFC的布局规则
- BFC内部的块会在垂直方向上一个接一个的放置；
- 垂直方向上的距离由margin决定，在同一个BFC里的两个相邻块margin会重叠；
- 每个块的左外边框紧贴包含块的左边框；
- 开启了BFC的块和浮动元素不会重叠，会挨着浮动元素显示；
- BFC是一个独立容器，BFC内子元素与外面子元素互不影响；
- 计算BFC高度时，浮动子元素也参与运算。
3. 触发BFC的方式
- HTML根元素自动触发BFC；
- 浮动的元素；
- 定位的元素，
position:absolute，position:fixed； display:inline-block/flex/table-cell-inline-flxe；- overflow，除visible。
4. 利用BFC清除浮动
在元素中添加overflow:hidden;样式来清除浮动
<style type="text/css">
.container{
background-color: #f1f1f1;
}
.left{
float: left;
}
.bfc{
overflow: hidden;
}
</style>
<div class="container bfc">
<img src="https://profile-avatar.csdnimg.cn/default.jpg!1" class="left" style="margin-right: 10px">
<p class="bfc">我是一段文字。。。</p>
</div>
清除浮动前，图片脱离文档流
清除浮动后，图片撑开容器
