一、什么是BFC？IFC?
BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。
BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 blockformatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 InlineFormatting Context(行内格式化上下文) 里格式化。
二、BFC的特性是什么？
1、BFC会阻止外边距叠加：一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。 如果这
两个相邻的块框不属于同一个BFC就不会叠加！
BFC不会重叠浮动元素
2、一个BFC的边框不能和它里面的元素的margin重叠。这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起作用！
三、如何触发BFC?
- float除了none以外的值
- overflow除了visible之外的值
- display(table-cell table-caption,inline-block)
- position(absolute,fixed)
四、如何清除浮动
css 浮动后的元素不论是什么display的都默认是block就是设置inline也是block
方式一:使用overflow属性来清除浮动.ovh{overflow:hidden;}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
方式二:使用额外标签法 .clear{clear:both;}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
方法三:使用伪元素来清除浮动(after意思:后来,以后)
clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
lineheight:
0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}在代码的使用中，一般采用第三种方法来清除浮动。