BFC专题

BFC定义

BFC(block formatting context)直译为”块级格式化上下文“。它是一个独立的渲染区域。只有块级元素参与，
它规定了内部的块级元素如何布局，并且与这个区域外毫不相干，外部元素也不会影响这个渲染区域内的元素

简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素， 外面的元素，也不会影响到区域里面的子元素

解释什么是BFC之前，要先知道Box、Formating Context的概念

Box: css布局的基本单位

Box，盒子，是CSS布局的对象和基本单位，直观点说，就是一个页面是由很多个盒子区域组成，元素的类型和display属性，决定了这个盒子区域的类型。
不同类型的盒子区域内的子元素，会以不同的Formatting Context (一个决定如何渲染文档的容器) 方式渲染

• 块级元素盒子，display属性为block, list-item, table 的元素，会生成块级元素渲染区域，并且以BFC方式渲染

• 行级元素盒子，display属性为inline, inline-table的元素，会生成 行级元素渲染区域，并且以IFC方式渲染

所以，CSS中常见的渲染方式有两大类：BFC和IFC

BFC的布局规则

• 默认，内部的块元素会在垂直方向，一个接一个的放置，每个块元素独占一行
• Box垂直放心的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠/合并，但水平方向不会
• 左侧BFC渲染区域的margin,必须与右侧BFC渲染区域的margin相衔接，不能出现重叠
• BFC渲染区域不会与float浮动定义的元素区域重叠
• BFC就是页面上的一个隔离的独立渲染区域，渲染区域里面的子元素不会影响到外面的元素，反之外面的元素也不会影响到渲染区域里面的子元素
• 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内

如何创建BFC

• float 的值不是none
• position的值不是static或者relative
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

BFC的应用

可以解决哪些问题？

避免垂直方向margin合并

 问题：垂直方向上，两个元素上下margin相遇，两元素间的距离并不等于两个margin的和，而是等于
 最大的margin，小的margin会被大的margin吞并

• 用一个外围块元素包裹下方元素，设置信外层元素 overflow：hidden 变成一个BFC方式渲染区域 结果下方元素的margin-top受到新外层元素BFC渲染区域的阻隔，不会影响外部上方元素的margin-bottom了，同理外部上方元素的margin-bottom，因为在BFC渲染区域之外，所以，也无法影响其内部元素的margin-top了
  缺点：为如果父级元素中部分自由定位的子元素，希望即使超出父元素范围，也能显示时，就冲突了
  解决方案：

// 父元素
::before {
	content: "",
	display: table
}

原理：display: table,在子元素之前形成平级的BFC渲染区域。不允许子元素的margin进入::before范围内
优点：既不隐藏内容，又不添加新元素，又不影响高度

避免垂直方向margin溢出

问题： 子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top，而实际上，子元素与父元素之间，依然是没有margin-top，效果不是想要的

解决方案：
设置新外层元素overflow：hidden 变成一个BFC方式的渲染区域
结果：
子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域，子元素的margin-top，才真正成为子元素与父元素上边的间距
多种方案：

• 为父元素添加上边框，颜色设置为透明
• 用父元素的padding-top代替第一个子元素的margin-top
• 在父元素内第一个子元素之前添加一个空的 用平级BFC渲染区域阻隔下方元素的margin-top
• 父元素：before{content:“”, display: table;} 用平级BFC渲染区域阻隔下方元素的margin-top

自适应两栏布局

功能描述：左固定，右自适应

.left {float:left;width:固定宽}
.right{overflow:hidden;} 变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了

防止高度坍塌

问题描述：父元素不写高度时，子元素写了浮动后，父元素会发生高度坍塌（造成父元素高度为0）

解决方案：

• 给父元素添加声明overflow：hidden
  优点：代码少，简单
  缺点：不能和position定位配合使用，超出的尺寸会被隐藏
• 在浮动元素下方添加空div,并给元素声明clear:both，保险起见，再加height：0，清楚个别块元素可能自带的height：16px
  缺点：需要添加多余的空标签并添加属性
• 万能方式：

	box::after{
  	content:"";
  	display:block;
  	clear: both;
  	height: 0;
  }

• 父元素添加浮动
  缺点：可能产生新的浮动问题 因为BFC