前端开发页面布局必须用到Formatting context，你确实在用，只不过你不知道而已，例如面试经常遇到的BFC-块级格式化上下文，就是其中一个渲染规则，准确的说Formatting context就是前端css渲染规则的全称！

css中的渲染规则：Formatting context，你100%用过它，可惜你不知道！-QUI-Notes

一.概念定义：

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。

二.常见类型

到目前css3为止，css渲染规则有四种常见类型：

  • BFC-块级格式化上下文(Block formatting contexts)
  • IFC-行内格式化上下文(Inline formatting contexts)
  • FFC-弹性格式化上下文(Flex Formatting Contexts)
  • GFC-网格布局格式化上下文(GridLayout Formatting Contexts)

 
看到这里，你是不是突然明白了常用的display:flex/display:block/display:grid...原来还有这一层深意，是不是有种恍然大明白的感觉？