BFC, IFC

###11.4

BFC:

BFC块级格式化上下文，它是一个环境。

当一个块级元素形成一个BFC环境以后，这个块级元素里面的子元素不会影响外面的元素，外面的元素也不会

影响里面的元素。但是当子元素里再创建一个子元素，就必须把父级的子元素也触发BFC环境，否则，子元素里的子元素也会影响外面的子元素和其他元素。

overflow:hidden;可以触发BFC环境。

当加上overflow:hidden;不是这个元素产生BFC环境，而是这个元素里面的子元素触发BFC

如果给一个元素触发了BFC环境，只能说明这个元素里面的子元素不会影响外面的元素，子元素里的子元素会影响。所以子元素里的子元素必须重新设定BFC环境

边距重叠：在BFC环境中，元素的外边距重叠，解决办

法：在元素的父元素设置overflow:hidden，触发BFC，里面的子元素触发BFC环境。

外边距： 两个DIV的 之间 button 和 top 取最大的值

产生BFC的属性：

float:浮动

position:定位

display:

overflow:hidden。注：overflow的属性不能为visible;

IFC:

IFC:行内格式上下文，行内属性自动触发，行内元素以基线对齐

属性：

line-height;

vertical-align;

基线：是以X字母下边为基线。

line-box:行框，一行当中包含每一个元素的行框，所有元素中最高的高度加上元素之间的差距。

行框会受line-height影响。

行内垂直居中：把所有元素加上vertical-align居中对齐，行高line-height 也可以实现。

垂直居中和水平居中：

1.元素没有高度，可以用padding居中对齐

line-height;对块级元素居中没有作用，只针对行内。

2.块级元素居中对齐：vertical-align + display:inlin-block 可以垂直居中。

3.绝对定位居中：父元素相对，子元素绝对，

子元素top：50%；left:50% + margin-top=-50%,margin-left=-50%;