BFC是什么：BFC（Block formatting context）块级格式上下文，是一个css的布局概念，是页面可视化CSS渲染的一部分，是块盒子的布局过程发生的区域。
BFC的触发条件：
1.浮动元素（元素的float不是none）
2.绝对定位元素（元素的position为absolute或flex）
3.行内块元素（display：inline-block）
4.overflow值部位visible的块元素
5.弹性元素（display:flex的直接子元素）
BFC的特性：
1.内部的BOX会在垂直方向上一个一个放
2.垂直方向上的距离由margin决定
3.bfc的区域不会和float元素区域重叠
4.计算bfc高度时，浮动元素也参与计算
5.bfc是页面上的独立容器，容器的子元素不会影响外面的元素
应用：
1.BFC中的盒子对其
2.外边距折叠：垂直方向上的距离由margin决定
常规文档流中，两个兄弟盒子之间的垂直距离不是外边距之和，而是以大的为准（外边距折叠）
如何让外边距不折叠：使用bfc,给其中一个盒子包一个div
3.不被浮动元素覆盖-两栏布局、三栏布局
左边为固定宽度float:left，右边不设宽度overflow:hidden触发bfc，右边自适应，随浏览器窗口大小变化
4.防止文字环绕盒子，为文字设置overfloat:hidden
扩展：overfloat:hidden的三种用法
1. 隐藏溢出
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
2. 清除浮动
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;
3. 解决父元素外边距塌陷的问题
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，因此，给父级元素添加overflow:hidden，就可以解决这个问题了。
原文：https://www.cnblogs.com/zhoujingye/p/12718723.html