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