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%;

BFC, IFC

标签：

原文地址：http://www.cnblogs.com/sgl520/p/4946986.html