厚积薄发 前端学习笔记 CSS基础篇-BFC

关于BFC的相关，这里做一个比较详细的总结

1、BFC的基本概念

BFC：直白点说就是满足一定规则的一个块级布局区域，这就是核心了，我们可以利用BFC的规则来很容易的达到某些布局需求，其实我们在布局中很可能已经默默用过BFC了，但是对BFC没有一个比较清晰的认知，下面我就详细的介绍一下

Box

Box 是 CSS 布局的对象和基本单位， 一个布局页面就是各种各样的Box组成的，不同类型的Box会有不同的渲染规则，下面是常用的box概念

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context（BFC）和 Inline formatting context （IFC）。
另外，CSS3中还增加了Grid（GFC）和Flex（FFC）

BFC详细定义

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

BFC布局规则：

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

BFC的生成方法

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

2、BFC的应用

• 内部清除浮动，浮动会导致父级元素整体结构塌陷，我们通过构造BFC，可以达到清除浮动的功能，具体如下
  这里需要给父元素加上overflow: auto属性即可，构造成BFC后，浮动元素也会计算宽度
  塌陷的父级元素：
  

  塌陷的父级元素.png
  
  构造BFC后的父级元素：
  
  构造BFC后的结构.png

• 解决margin重叠的问题
  这里将两个子元素放置在两个不同的BFC中，才不会发生重叠，在同一个BFC下，会发生margin重叠，这个是BFC的布局规则
  margin重叠的情况：
  

  margin重叠的情况.png
  
  构造BFC后的情况：
  
  构造BFC后的margin情况.png

• 解决自适应左右布局的问题
  这里是采用的左右布局的一种方法，即左边浮动，右边构造BFC的方法，因为浮动元素会脱离文档流，构造成BFC后，会计算浮动元素的宽度，另外一边自然就能自适应了
  左浮动，右边未构造BFC，会导致右侧在文档流中从最左边开始，我们说了float会导致元素脱离文档流，如下图：
  

  左浮动右自适应布局未构造BFC.png
  
  左浮动，右边构造BFC，这是应用了 BFC的区域不会与float box重叠的特性：
  
  左浮动右边构造BFC效果.png