学习BFC心得

首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化范围”。

     它的作用是决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

     其通俗理解可以理解为一个BFC块就是一个独立的单位，其互不打扰。

     BFC块的表现规则有一下几个情况：

1. 1. 2. 在BFC块中的元素，其子元素按照文档流一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于‘margin’特性。这里要注意外边距塌陷的问题，在Css中Collapsing marign的特性1就是在相邻的普通文档流中的块框在垂直位置的空白边会发生margin重叠现象。垂直方向上相邻的两个外边距(margin)会合并成一个，最终的大小，是两个中较大的。 然而BFC可以解决这个问题，方法是将这个两个容器添加至一个具有BFC特性的包裹容器中。
      3. 每一个元素左外边会与包含块的左边相接触
      4. BFC是一个独立容器，里面的子元素不会再布局上影响到外面的元素，外面的元素也不会影响其元素。
      5. BFC元素不可以与浮动元素重叠
      6. 当包容容器有足够的剩余空间时，浏览器会将BFC放在浮动元素所在行的剩余空间内。

     BFC块如何产生：

1. 1. 2. float的值不为none
      3. overflow的值不为visible
      4. display的值为table-cell，table-caption，inline-block中的任何一个
      5. position的值不为relative和static

     BFC的能力：

1. 1. 2. 不和浮动元素重叠
      3. 清除元素的内部浮动 （
         在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。所以，触发外部容器BFC，高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。
          ）
      4. 清除外边距塌陷。