持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情
铃铛说点题外话
一句话前情回顾：ES6针对对象对变量的声明、扩展运算符进行了优化，并且新增了类中的super关键字
一句话介绍今天：BFC是什么？BFC的触发条件？BFC能做什么？
铃铛说正文
那就先来说说BFC是什么
BFC
BFC全称为块级格式化上下文。它是 W3C 规范提出的一个概念，它决定了元素对其内容如何进行定位以及与如何和其他元素的关系和相互作用。我们也可以这么理解BFC，BFC会提供一个环境，HTML元素在这个元素中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的的布局。
这里举一个例子，比如浮动元素会形成BFC，浮动元素的内部子元素的主要是受到浮动元素的影响，两个浮动元素之间是互相不影响的。那么我们也可以理解BFC就是一个独立的单位的意思。可以说BFC就是一个作用范围，把它理解为是一个独立的容器，并且这个容器里的盒子布局与这个容器外的盒子毫不相关。
触发BFC的条件
- 浮动元素（float属性的值为left或者right）
- 绝对定位元素（position属性的值为absolute或者fixed）
- 内联块（display属性的值为in;ine-block）
- 表格单元格（display属性的值为table-cell，也是HTML表格单元格默认属性)
- 表格标题 (display属性的值为table-caption,也是 HTML表格标题默认属性)
- 具有overflow属性的值不为visible的块元素
BFC能解决什么
- 垂直外边距的重叠问题
- 去除浮动
- 自适应的两列布局
总结：我们可以理解BFC就是一个独立的容器，容器内的布局和容器外的布局之间互相不影响。触发的条件总结一句就是脱离的原本的文档流。
跟铃铛说再见
学习的最后一步：放松
今日冷笑话：鲁班是春秋时期著名的发明家，相传他为其母亲制造木马车，他母亲端坐在车上，由木人驾驭，一去不返。他的父亲竖起大拇指直夸她：真是个懂事的好孩子!闲来无事，苏轼去金山寺拜访佛印大师，没料到大师不在，一个小沙弥来开门。苏轼傲声道：“秃驴何在?。”小沙弥淡定的一指远方，答道：“东坡吃草!”？
放松结束，猜猜明天会说讲些什么吧
