更多：https://www.jb51.net/css/598508.html
概念
块级格式化上下文。类型可以为block或inline两者其一，浏览器会将BFC放置到浮动区域所在行的剩余空间。我理解起来bfc像页面的html根模块，互不影响的容器模型
触发BFC
2、绝对，固定定位 float浮动除了none之外的属性
3、overfolw除了visible 之外的 hidden auto scroll属性
4、display为inline-block flex table-cell
作用
1、属于不同的BFC margin垂直方向不重叠，子级的margin不会因为父级 没有padding border而穿透父级
2、包含浮动元素之后，有清除浮动的效果，解决父元素塌陷的问题
3、防止浮动元素覆盖其他元素，因为bfc会按照放置到所在行的剩余空间
什么是浮动：浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。但是需要注意float其实没有完全脱离文档流，浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间。如图1是一开始的样子，正常的块级元素各占一行，图2粉色块左浮动，脱离块级文档流，绿色的块会填充进去，但是粉色块的文本空间并没有脱离，所以导致绿色块的字被挤到了下面，这个时候可以用一个BFC来清除绿色块的浮动图3。
1
2
3
