css布局——BFC、IFC

 常见的FC有：

1.BFC（块格式化上下文）

【1】根元素，即HTML元素

【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed

规则：
1.BFC的区域不会与float box重叠。
2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
3.计算BFC的高度时，浮动元素也参与计算。
 
用途：
1.自适应两栏布局
2可以阻止元素被浮动元素覆盖
3可以包含浮动元素——清除内部浮动
4.分属于不同的BFC时可以阻止margin重叠

2.IFC（行级格式化上下文）

【1】 font-size
【2】line-heigh
【3】heigh
【4】vertical-aligin

特点：
1.水平方向根据direction依次布局
2.不会在元素前后换行
3.受white-space属性的影响
4.margin/padding 在竖直方向无效，水平方向有效的
5.white/height 对非替换行内元素无效，宽度由元素内容决定。（替换元素在下面解释
6.非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height，padding，border，margin决
7.浮动或者绝对定位会转化为bloc
8.vertical-align属性生效

input a img span 以及display 属性值为inline-block的元素

替换元素：

<img><input>
<textarea>,<select><object>等这些都是替换元素。