BFC知识点概括与总结

　　什么是BFC？如何生成一个BFC？BFC有什么作用？

　　一：什么是BFC？

　　首先了解CSS中两个概念：box和formatting context。

　　Box：CSS布局中的基本单位。一个页面由多个box组成，元素的类型和display的属性决定了这个box的类型，不同类型的box会参与不同的formatting context，box内的元素会以不同的方式进行渲染。主要的box类型有以下两种：

　　1.块级元素block-leave block：它的display属性为block, list-item, table，参与block formatting context；

　　2.行级元素inline-level box：它的display属性为inline, inline-block, inline-table，参与inline formatting context。

　　formatting context：W3C CSS2.1规范中的概念。它是页面中的一块渲染区域，有一套渲染规则，它决定其子元素如何定位、和其他元素之间的关系与相互作用。常见的formatting context有BFC（Block formatting context）和IFC（Inline formatting context）。

　　BFC全称是“Block Formatting Context”，中文直译“块级格式化上下文”。它是一个独立的渲染区域(formatting context)。只有block-level box参与，它规定内部的block-level box如何布局，并且与这个区域外部毫不相干。

　　BFC布局规则：

• 内部的box会在垂直方向一个接一个的放置
• box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
• 每个元素margin box的左边，与包含块border box的左边相接触（对于从左向右的格式化，否则相反），即使存在浮动也是如此；
• BFC区域不会与float元素重叠
• BFC是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素
• 计算BFC高度时，浮动元素也参与计算

　　如何生成BFC：

• 根元素
• float属性不为none
• position为absolute或者fixed
• dispaly为inline-block,table-cell, table-caption, flex, inline-flex
• overflow不为visible

　　有何作用：

　　1.自适应两栏布局

　　2.清除浮动

　　3.防止垂直margin重叠（外边距合并）

　　4.防止父子边距合并（外边距塌陷）

BFC知识点概括与总结

原文：https://www.cnblogs.com/xuxiaoqiangAndHM/p/10463634.html