之前知道BFC这个概念，但是一直没怎么去深入理解，今天看了一下大佬们的博客，自己总结了一下自己理解的BFC，如果有不对的地方请大佬指正。
常说的两栏（或多栏）宽度自适应也就是利用了BFC原理。
未触发BFC的元素
，子元素默认文字行高高于浮动元素时会出现环绕效果，但是浮动元素不参与高度计算；C（蓝色）浮动，不参与A（黄色边框）的高度计算，所以与B（红色）有部分重叠；
高度根据文字内容决定。
BFC：内部子元素不会影响外部元素，浮动元素也参与高度计算；
BFC浮动元素参与高度计算；C（蓝色）为浮动元素，但是因为A（黄色）触发了BFC，C也参与高度计算，A的高度为C的高度（如果比文字高度高），内部子元素不会影响外部元素（B）。
下面我列举了几种我认为最常用的几种触发方式，还有另外的我觉得没什么用就没列举。详细可参考这里
触发方式：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、flex（flex布局，注意拉伸）
4、display的值为table-cell,设置宽度超过浏览器窗口宽度，单元格有个非常神奇的特性，就是你宽度值设置地再大，大到西伯利亚，实际宽度也不会超过表格容器的宽度。
5、overflow的值不是visible
结语：好像也没什么可说的，平时用的都是框架居多，而且现在布局多是用flex布局，毕竟兼容性基本上都兼容了，但是多理解一些原理总没错，面试也可以用