BFC（Block fomatting context）

关于BFC布局（Block fomatting context）

这是小白第一次写博客，有错误的地方还希望大佬指正。

BFC

1. BFC的意思为块级格式化上下文 。它是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干；
2. Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型；
   3.不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，那么根据不同的box类型有以下的盒子：
   ①.block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context(简称BFC)；
   ②.inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context（简称IFC)；

BFC布局规则

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

BFC的生成

1. 根元素；
2. css中float属性不为none的元素；
3. css中position为absolute或fixed；
4. css中display为inline-block, table-cell, table-caption, flex, inline-flex；
5. css中overflow不为visible。

BFC的用法

1. 自适应两栏布局：左栏定宽左浮动，右栏不定宽overflow:hidden;（设置成BFC）
2. 防止垂直 margin 重叠：其中一个元素外套一个div并设置overflow:hidden;（设置成BFC）；
3. 清除内部浮动：父元素设置overflow:hidden;（设置成BFC），既之前我们用来清除浮动的方法之一。

小白在线欢迎大佬指正和交流~