搞懂CSS中的BFC

2021-03-31

搞懂CSS中的BFC

BFC在CSS中是非常重要的，对于元素的布局有着重要的影响，涉及到了诸多问题，例如，float，position等。因此了解它是必要的。

一、BFC是什么

对于MDN（官方）定义：

块格式化上下文（Block Fromatting Context,BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

有点难懂，官方语言格式化一下：BFC是块级格式化上下文，它是Web页面中的一块渲染区域，它这个区域有着自己的渲染规则，它的规则决定布局对齐内容，以及与其他元素的关系。BFC提供一个独立的环境，HTML元素在这个区域内按照BFC的规则进行布局。简单说：BFC是一块独立的布局环境，内部的元素只影响内部元素，不会受外部元素影响。

二、BFC的布局规则

  • BFC的高度，浮动子元素也要参与计算。如果不参与计算，怎么能伸开它的父元素的高度呢；
  • BFC是一块独立的容器，容器中的子元素不会影响到外部的元素，外部的元素也不会影响容器的元素；
  • 在同一个BFC中，float box模型之间不会发生重叠；
  • 在同一个BFC中，两个相邻的Box的margin会发生重叠；
  • BFC内部的box是垂直方向上布局的。

三、BFC创建

元素 属性值
overflow 除visible以外的值，hidden、auto、scroll
根元素
float right 、left
postion absoulte、 fixed
display inline-block、table-cell、flex、table、table-x、flow-root、grid、inline-grid
contain Layout、content、paint
column-span all
colum-count\column-width 非auto、以及column-count:1

元素满足以上任一个条件可创建BFC。其中删除线是非常用的。table-x：指table-row、table-row-group、table-header-group、table-footer-group。

四、BFC特性应用

下面代码运行环境，请使用Tryit Editor

1.同一个BFC相邻两个元素外边距重叠

image-20210329150856297

image-20210329151019174

从效果上看，<div>元素都处于同一个BFC容器下(<html>)，所以第一个<div>下边距与第二个<div>上边距发什么了重叠，两个盒子的之间的距离只有100px。

如果要避免外边距的重叠，可以把<div>元素放在不同的BFC容器中.

image-20210329153053937

image-20210329153112215

这样两个盒子之间的边距为200px。

2.BFC阻止父元素高度坍塌

先看看普通流布局

image-20210329165615982

image-20210329165732558

再看看触发BFC

image-20210329181006335

image-20210329181026349

我们可以看到，父元素红色容器已经被撑开了。

3.BFC阻止元素被浮动元素遮挡

没有触发BFC情况下

image-20210329182305914

image-20210329182332746

触发BFC情况下

image-20210330094751586

image-20210329182448582

两个

元素都开启了BFC，会使元素横向排列。这个可以做自适应宽度布局：左边宽度固定，右边的内容自适应宽度。

父元素自适应子元素高度布局：

image-20210330103913778

image-20210330103937968

父元素一个BFC，子元素是float同时触发BFC。子元素的宽度是固定的，子元素高度自适应内容。父元素自适应子元素的高度。