bfc定义 (box formatting context)

译为块级格式化作用域 它是一个独立的渲染区域
只有Block-levelbox参与 它规定内部的Block-levelBox如何布局 并且与这个区域外部毫不相干

css布局的基本单位

box是css布局的 对象和基本单位 
直观点说 就是一个页面由多个box组成 元素的类型 和 display属性 (一个决定如何渲染文档的容器)

formatting coontext 
人家w3c css2.1规范中的一个概念    
他是页面中的一块渲染区域 并且由一套渲染规则 决定了子元素如何定位  以及和其他元素的关系和相互作用
复制代码

最常见的Formatting context有？

  Block fomatting context  (简称BFC)
  Lnline formatting context(简称IFC)        
  BFC 一个独立的布局环境 其中的元素布局是不受外界影响的 
  并且在一个BFC中 块盒 和 行盒(行盒 由一行中所有的内联元素所组成)
  都会垂直的沿着其父元素的边框排列 
复制代码

BFC的布局规则

 1 .内部的Box会在垂直方向 一个接一个的放置 (即 一列的)
 2 .Box垂直方向的距离由margin决定 属于同一个BFC的两个相邻的Box的margin会发生重叠 
 3 .计算BFC的高度时 浮动元素 也参与计算 
 4 .BFC可以看成页面上的隔离的独立容器 容器里面的子元素不影响外面的元素 反之也是如此 
 5 .BFC区域不会与 float box重叠 
 6 .每个盒子(块盒 和 行盒)的margin box的左边 与包含块border box的左边相接触 ....   
复制代码

如何创建BFC？ (即布局的时候是怎么触发BFC的)？

 1 .float的值不是none 
 2 .position的值不是static跟relative
 3 .display的值是inline-block table-cell flex table-caption inline-felx 
 4 .overflow的值不是visible  
    就会形成的
复制代码

![01.png](p3-juejin.byteimg.com/tos-cn-i-

bfc的作用

  阻止margin重叠
  可以包含浮动的元素（清除浮动）
  可以阻止元素被浮动元素覆盖
复制代码

看图片上面的demo了
最后 就是说布局 再套个div而已了