BFC

创建一个BFC

1. 根元素，即html
2. 浮动，float不为none
3. 绝对定位，position为absolute或fixed
4. overflow设置为visible之外的值
5. display设置为flex、inline-block、table-cell、inline-flex、

BFC特性

1. 外边距折叠：在同一个BFC内的相邻盒子的垂直外边距会重合，外边距不一样时以最大的为准，可以通过创建新的BFC(包裹不想重叠的元素)解决
2. 计算BFC的高度时，浮动元素也参与计算：可用于清除浮动
3. BFC的区域不会与float box重叠：防止元素被浮动元素覆盖，可用于自适应两栏布局
4. float文字环绕：浮动元素会覆盖兄弟元素，但不会覆盖其中的文字，这是因为float最初是为文字环绕图片而设计的
5. BFC是页面上一个隔离的独立容器，容器中的子元素与容器外的元素不会相互影响

注意

IE中没有BFC但有Layout，我们在使用以上方法出发BFC时可以使用zoom:1出发IE浏览器的Layout
参考