BFC/块级格式化上下文（CSS查漏补缺）

文: jack同学

• 是什么：它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的一些布局规则

• 另外一些概念：

  • 视觉格式化上下文包含了块级格式化上下文，所以BFC也是布局规则的一种，并且是常规流块盒布局规则的一部分。
  • 所谓创建BFC的元素，也就是某个元素具有了一些布局规则
  • BFC渲染区域：这个区域由某个HTML元素创建，下面的元素会在内部创建BFC
    • 根元素，HTML元素会创建BFC，包含了页面所有元素
    • 浮动和绝对定位元素
    • overflow不等于visible的块盒
    • 行块盒

• 解释为什么是独立的渲染区域？

  • 各个BFC区域相互独立，渲染时互不干涉

• 具体规则：

  • 创建BFC的元素，他的高度需要计算子元素是浮动的元素。（这一点可以解决浮动之后父元素高度塌陷的问题，让父元素创建bfc）
  • 创建BFC的元素，他的边框盒不会与浮动元素重叠。（这一点可以布置两栏布局，左侧元素定宽浮动，右侧BFC元素自适应宽度）
  • 创建BFC的元素，不会和子元素进行外边距合并（这一点可以解决父子元素margin塌陷问题，也是让父元素创建BFC）