BFC&IFC

文章目录

1. 1. BFC
   1. 1.1. 触发BFC的条件
   2. 1.2. BFC的作用
2. 2. IFC

BFC

BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式得修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。【参考资料1】【参考资料2】

触发BFC的条件

• 浮动元素float
• position: absoulte | fixed
• display: block | inline-block | flex
• overflow: hidden | auto | scroll

BFC的作用

• BFC是一个封闭的大箱子，里面无论怎么弄，都会包裹子元素
  • BFC父元素会包裹子元素的margin
  • BFC父元素会包裹浮动的子元素
  • 特殊情况：当不包裹某些特别的子元素时，该子元素会超出父元素的border范围，但不会影响外部元素的排列（可能会挡住外面的元素）
    • 不会包裹position:absolute的子元素
    • 只包裹inline子元素的content
• BFC元素不会被floatBox覆盖，普通元素会被覆盖（防止floatLeft覆盖rightDiv／取消img环绕效果）
• 相邻块级BFC的垂直margin会发生折叠
• 两列布局：自适应宽度

See the Pen BFC by guangjun (@guangjun) on CodePen.

IFC

inline/inline-block元素会有一套默认的垂直对齐规则，有时候会对不齐，使用vertical-align设置即可【参考资料】

• inline元素的baseline，为内容盒content-box里面文本框的基线
• 如果inline-block内部有内容，则baseline为内容最下方的baseline
• 如果Inline-block内部无内容，则baseline与margin-box的下边缘重合
• 如果overflow属性不为默认值visible，则baseline与margin-box的下边缘重合