css-BFC(块级格式化上下文)

块级格式化上下文

1. 上下文定义：

①一个参与多方构建，遵循一定规则，独立的环境；
②子项可能创建新的独立环境，与外层的环境有同样的规则，可是却会和外层隔绝。

橙色的球里面有4个球，然后第4个球里面还包含了2个球，是独立的，与外层是隔离的。

2. 块级格式化上下文定义：

①Block Formatting Context简称BFC
②块级元素参与构建的、遵循一定规则的独立环境

3. BFC形成条件

   • 根元素
   • float属性不为none;
   • position为absolute、fixed、sticky
   • display为inline-block、table-cell
   • display: flow-root或者flow-root list-item
   • overflow为hidden、scroll、auto
     推荐使用display: flow-root，没有副作用，但是兼容性很差。

4. BFC特性

   • 内部的块级盒子会在垂直方向，一个接一个的放置。
   • 两个盒子垂直方向的间距由margin决定，属于同一个BFC的两个相邻盒子的外边距会发生折叠。
   • BFC的区域不会与浮动盒重叠。
   • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到子元素。
   • 计算BFC的高度，浮动元素也参与计算。

5. BFC应用
   ①清除浮动，但是可能会有副作用，推荐还是使用伪元素clearfix的方式。

   • 浮动引起父容器高度塌陷

     
     
     由于子元素都是浮动，受浮动影响，父元素的高度塌陷无法包裹子元素

   • 解决方案：为父元素wrap加上overflow: hidden；使其形成BFC，根据BFC特性第5条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。
     

     为父元素添加overflow: hidden，清除浮动

②阻止元素被浮动元素覆盖，可以实现两栏自适应布局。

• 右侧的元素被浮动元素覆盖

  
  
  文字跑到左边的浮动元素下方了

• 解决方法：
  为main设置overflow: hidden/auto触发main元素的BFC，根据BFC特性，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两栏自适应布局。
  

  自适应两栏布局

③防止垂直margin合并

margin合并

可以看到，明明.top和.bottom中间加起来有200px的margin值，但是我们只能看到100px，那是因为他们的外边距相遇发生了合并。

解决方案：
为其中一个元素包裹一层元素，并未这个外层元素设置overflow: hidden;使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。

给一个元素外层加div

参考：饥人谷课件
https://www.jianshu.com/p/8e92c059db79