IFC和bfc的知识点。

IFC和bfc的知识点。

IFC(IFC(inline formatting context),即⾏内格式化上下⽂，,⽔平⽅向上的margin，border和padding在框之间得到

保留。框在垂直⽅向上可以以不同的⽅式对⻬：它们的顶部或底部对⻬，或根据其中⽂字的基线对⻬。包含那些框的

⻓⽅形区域，会形成⼀⾏，叫做⾏框(line box)。⼀个⾏框的宽度由包含它的元素的宽度和包含它的元素⾥⾯有没有float

元素来决定，⾼度的确定由⾏⾼度计算规则决定。⾏框的⾼度⾜以包含他的内部容器，也可能⽐它包含的容器们都⾼（⽐如

在基线对⻬的时候），当他包含的内部容器的⾼度⼩于⾏框的⾼度时，内部容器的垂直位置由⾃⼰的vertical（默认值

)是baseline）这个属性来确定。（这个性质可以⽤来实现垂直居中）

bfc独立的渲染区域/与该区域外部不想干/需要触发flower-hidden声明独立

bfc(内部的Box会在垂直⽅向，⼀个接⼀个地放置。

Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。

即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。

计算BFC的⾼度时，浮动元素也参与计算

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visibleBFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也

BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也

如此。