BFC和IFC

     IFC      IFC(inline formatting context),即⾏内格式化上下⽂，与之对应的是BFC(block formating context),块格式化上下⽂

     在IFC中，框（boxes）⼀个接⼀个地⽔平排列，起点是包含块的顶部。⽔平⽅向上的margin，border和padding在框之间得到保留。框在垂直⽅向上可以以不同的⽅式对⻬：它们的顶部或底部对⻬，或根据其中⽂字的基线对⻬。包含那些框的⻓⽅形区域，      会形成⼀⾏，叫做⾏框(line box)。      ⼀个⾏框的宽度由包含它的元素的宽度和包含它的元素⾥⾯有没有float元素来决定，⾼度的确定由⾏⾼度计算规则决定。      ⾏框的⾼度⾜以包含他的内部容器，也可能⽐它包含的容器们都⾼（⽐如在基线对⻬的时候），当他包含的内部容器的⾼度⼩于⾏      框的⾼度时，内部容器的垂直位置由⾃⼰的vertical（默认值是 baseline）这个属性来确定。（这个性质可以⽤来实现垂直居中）      eg：<p style="background:silver;width:400px;">          <span style="font-size:50px;border:1px solid yellow;">你好</span><em style="border:1px solid          yellow;">我好</em><span style="vertical-align:top;border:1px solid yellow;">⼤家好</span>          </p>

     ⾏内框还可能由于双向⽂本处理（bidirectional text processing）⽽在同⼀个⾏框内被分割为好⼏个框。      不包含⽂本、保留空⽩符、margin/padding/border⾮0的⾏内元素，以及其他常规流中的内容（⽐如，图⽚，inline-blocks和      inline-tables），并且不是以换⾏结束的⾏框，必须被当作0⾼度⾏框对待。就外边距折叠⽽⾔，这种⾏框必须被忽略。      补充：在IFC的环境中，是不能存在block-level元素的，如果将block-level元素插⼊到IFC中，那么此IFC将会被破坏掉，⽽      block-level元素前的元素和block-level元素后的元素将会各⾃⾃动产⽣⼀个匿名容器其包围，这个匿名的容器内部环境将是⼀个      新的IFC。

     BFC      BFC(Block formatting context)直译为"块级格式化上下⽂"。它是⼀个独⽴的渲染区域，只有Block-level box参      与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。      布局      内部的Box会在垂直⽅向，⼀个接⼀个地放置。     Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠     每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。     即使存在浮动也是如此。     BFC的区域不会与float box重叠。     BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。     计算BFC的⾼度时，浮动元素也参与计算     哪些元素会生成BFC     根元素     float属性不为none     position为absolute或fixed     display为inline-block, table-cell, table-caption, flex, inline-flex     overflow不为visible         每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格     式化，否则相反)。即使存在浮动也是如此。     BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也     如此

转载于:https://www.cnblogs.com/tangqi/p/5327100.html