BFC
块格式化上下文（Block Formatting Context，BFC）
BFC是什么其实很难去讲清楚。就好像，你知道桌子是什么，但是你不好用语言形容，但是你看到了它，却可以认出来他是桌子一样。
那么我们只需要记住什么时候会 创建块格式化上下文
【CSS BFC是什么（）】上面是MDN的说法，但是其实面试中不需要说这么多情况，毕竟这个也就是在面试中会使用到。
那么我们就记住一部分就好了。
- 根元素（）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 计算值(Computed)不为 visible 的块元素
- display 值为 flow-root 的元素 （兼容性不太好）
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
我们平时会使用
.container::after{
content:'';
display:block;
clear:both;
}这种方式来清除浮动。那就是因为创造BFC来清除浮动会使用一些副作用的css
display:flow-root这个属性的兼容性又不太好，所以BFC的讨论大多数都是存在于面试当中。
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）