BFC布局规则
1. BFC （Block formatting contexts） 就是块级格式上下文，是页面盒模型（块盒和行盒）布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：
- html 根元素
- float 浮动，即float 除 none 以外的值
- 绝对定位，position (absolute、fixed)
- overflow 不为 visiable，即为（hidden、auto、scroll）
- display 为表格布局或者弹性布局，如display 为 inline-block、table-cells、flex
2. BFC 主要的作用是：
- 清除浮动，比如一个div中包括一个float元素，要把它包含进来，就需要对这个div设置如overflow: hidden的就变成一个BFC。
- 防止同一 BFC 容器中的相邻元素间的外边距重叠问题，下面的两个div元素的上下间隔最后为100px，so, 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。这里可以对每一个div设置overflow：hidden，然后里面的内容放到一个div或p中。
<head> div{ width: 100px; height: 100px; background: lightblue; margin: 100px; } </head> <body> <div></div> <div></div> </body>
- 实现左图右文之类的效果，两列布局模式。
<img src='image.png'> <p>我是超长的文字<p> img { float:left } p { overflow:hidden }
- 解决浮动元素造成的父元素高度塌陷问题：
<div class='parent'> <div class='float'>浮动元素</div> </div> .parent { overflow:hidden; } .float { float:left; }
