介绍一下BFC 什么情况下可以产生BFC
(1) 什么是BFC
BFC 全称为 “块 格式化 上下文” (Block Formatting Context)
Block Formatting Context 块元素 格式 上下文，他是一种特定触发条件下的规则。Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
(2) 怎么产生BFC
- float:left或right
- 根元素Html
- overflow:hidden,auto,scoll
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position:fixed,absolute
更多形成BFC:developer.mozilla.org/zh-CN/docs/…
（3）什么情况下用BFC
观察BFC的几种触发方式。我们可以看出：这几种触发条件，表面上都是一些自身属性的设置，但是这几个属性都会带来“副作用”(比如:改变文档的流式布局；块级元素的自适应性；)简单的说：就是这几个副作用就是--后效性，
我们为了屏蔽这种副作用，就要触发BFC，通过BFC将副作用的影响范围控制住 。当我们为了局部效果将子元素和父元素中的一个使用了上面的触发条件。必然会引起属性效果的“向后非期望蔓延”BFC就是针对这几个属性的补救措施。但是之所以没有默认触发，可能是考虑到副作用可能是期望的效果，即选择的权利交给了开发人员。因此上我们是为了BFC效果，才触发了条件。而实际上是因为局部使用了有后效性的属性，我们才用BFC的规则将布局回归到正常。 以我的理解BFC可以翻译为“盒模型布局异常修正系统”。
(4) BCF解决问题
- 外边距重叠
- 自适应两栏或三栏布局
- 防止字体环绕
- 清除浮动
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
(1)为什么需要浮动
以前提出浮动的概念主要是为了解决左边图片，右边文字的需求，后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时，针对于一个花店的导航页，存在许多的图片显示，而有效并且美观的布局样式极为重要，这时float属性就显得尤为重要。
(2) 浮动带来的问题
- 当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
(3)清除浮动的方式
- 最后一个浮动元素后加空div标签 并添加样式clear:both。（不推荐）
- 父级添加overflow属性（父元素添加overflow:hidden/auto）（不推荐）
- 父级div定义height (不推荐)
- 父级div定义伪类使用after伪元素清除浮动 或 zoom（推荐使用）
:after{display:block;clear:both;content:"";visibility:hidden;height:0}
clearfloat{zoom:1}
