css之BFC和IFC

BFC

BFC(Block Formatting Context)  ------ 块级格式化上下文

w3c规范定义：浮动元素和绝对定位元素，非块级盒子的块级容器（inline-blocks，table-cells，table-captions），以及overflow的值不为visiable的块级盒子，都会为它们的内容创建新的BFC

相关定义：

block-level boxes（块级盒）------  一个 block-level element块级元素 ('display' 属性值为 'block', 'list-item' 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中

block-formatting context（BFC） ------ 在这种布局下，盒子所在的containing block顶部起一个接一个垂直排列，水平方向上撑满整个宽度。

containing block（包含块）------ 盒子本身为其子孙建立containing block，用于计算内部盒子的位置、大小。

哪些元素会触发BFC：

　　1.根元素；

　　2.float属性不为none;

　　3.position为absolute或者fixed

　　4.display:inline-block,table-cell,table-caption,flex

　　5.overflow不为visible

BFC布局准则：

　　1.内部盒子在垂直方向上，一个个垂直放置

　　2.其不会和float(浮动元素)重叠

　　3.其垂直方向由margin决定，同一BFC布局下的元素的margin会重叠

　　4.在其布局下，子元素的内容不管怎么变化都不会影响到其外部元素

　　5.其高度会把float浮动元素的高度也算进去

　　6.元素的左边会和其包含的盒子的左边想接触，存在浮动也是如此

BFC的用途：

　　1.由于不会和浮动元素进行重叠，所以在自适应的两栏布局上起到了很好的作用。

　　2.可以清除内部的浮动

　　3.可以去margin重叠，因为不同BFC布局下的元素margin不会重叠

样例分析：

　　自适应两栏布局

 <div>
          <img class="leftbox" src="../images/none_new.png">
          <div class="rightbox">
             <h3>开发商</h3>
             <span>sdfsdfsdfsdfs士大夫撒旦法</span>
          </div>
     </div>

　　左边图片左浮动，右边内容可以设置BFC布局，不会和浮动元素进行重叠。

　　广为流传的俩种两栏自适应布局：

.rightbox{overflow: hidden;*display:inline-block;} //缺点是hidden可能会隐藏溢出部分
.rightbox{display: table-cell;width:2000px;*display: inline-block;*width: auto}

IFC

IFC( Inline Formatting Contex)  ------  内联格式化上下文

w3c规范定义：从父元素的顶部开始，盒子一个接着一个横向排列，横向的margin/border/padding在这些盒子中都是有效的。盒子间可能通过不同的方式垂直对齐（底部、顶部、文字基线对齐）。

相关定义：

line box (行盒模型)  -----  根据块状容器内，每一行的多个内联元素共同生成一个行盒模型。当内联盒子的宽度超过line box,内联盒子会被分解成几个盒子，然后分布在几个line box里面，如果内联盒子不能被分解（例如：单词或者white-space:nowrap），它就会超过line-box。

影响布局的css:

　　1.font-size

　　2.line-height

　　3.height

　　4.vertical-align