css布局中BFC的事情

在页面布局中，其实很多地方都用到了BFC只不过，不知道它叫这个名字。

BFC，说是块盒作用域上下文，包括从开始写页面，html,也是一个bfc 形成这个的因素很多。最开始布局使用的浮动，清除浮动，就是给2个相邻的元素创建各自的BFC，这样就不会收到浮动的影响，比如：父元素下面2个div都浮动了，导致它两脱离文档流，父元素不能包裹住它两（高度塌陷），如果不受其影响，那么常用的办法是给父元素设置overflow:hidden。

 

我复制一下大佬的总结：

　　BFC如何创建：

• 根元素（浮动元素（元素的float不是 absolute 或 inline-block）
• 表格单元格（元素的 display为 table-caption，HTML 表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 、 （分别是HTML table、row、tbody、thead、tfoot的默认属性）或 ）、table-row-grouptable-header-grouptable-footer-groupvisible的块元素
• display实际flow-root 的元素
• contain是 content 或油漆 的元素
• 弹性元素（display为 inline-flex 元素的直接子元素）
• 元素元素（display为 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count或 column-width(en-US)
  
• all 的元素总是会创建一个新的 BFC，即使元素没有在一个多列容器中

  BFC布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。
  • BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
  • 内部的Box垂直方向的距离由margin决定。
  • 属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
  • 计算BFC的高度时，浮动元素也参与计算。（清除浮动 haslayout）
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。