BFC
Block Formatting Contex
块级格式上下文
BFC
BFC名为块级格式上下文。
BFC可以理解为一种能力或者特征。具有BFC的元素，无论其子子孙孙如何翻腾，都不会影响外部元素。所以BFC元素不会发生margin重叠，因为重叠就会影响外部元素；并且BFC元素会清除浮动，因为如果元素浮动，父元素高度塌陷，就会影响外部元素。
谁可以有BFC能力
可以去MDN查看全部信息，这里只列出常用的
- 文档根元素<html>；
- float不为none；
- 定位元素position值为absolute、fixed（绝对定位，固定定位）
- diaplay的值为inline-block、table-cell、table-caption
- overflow值为auto、scroll、hidden
- 弹性元素（display为flex或者inline-flex元素的直接子元素）
- 网格元素（display为grid或者inline-grid元素的直接子元素）
BFC的应用
BFC避免margin重叠和清除浮动并不是主要作用，更重要的可以创建自适应布局。
上面列出的各种拥有BFC的元素，但是如果考虑到兼容性，可以用的其实就不多了。一下是张鑫旭大大总结可以用于IE7及以上版本浏览器适配的自适应解决方案：
1、借助overflow属性
.lbf-content { overflow: hidden; }
2、融合display:
.lbf-content { display: table-cell; width: 9999px; /* 如果不需要兼容IE7，下面样式可以省略 */ *display: inline-block;*width: auto; }
但是这两个方案也并不是完美的，第一个方案如果子元素定位父元素的外面可能会被隐藏。第二个方案无法直接让连续英文字符换行。
解决display:table-cell英文字符无法换行的问题：
.word-break { display: table; width: 100%; table-layout: fixed; word-break: break-all; }
参考
- BFC——MDN
- 《css世界》