前端布局之浅谈BFC- 汇维网

大家好，我是
CoderBin,在介绍BFC之前，需要先给大家介绍一下文档流。,我们常说的文档流其实分为
定位流、
浮动流、
普通流三种。,如果元素的属性
position 为
absolute 或
fixed，它就是一个绝对定位元素。,在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。,它的定位相对于它的包含块，相关CSS属性：
top、
bottom、
left、
right；,对于
position: absolute，元素定位将相对于上级元素中最近的一个
relative、fixed、absolute，如果没有则相对于body；,对于
position:fixed，正常来说是相对于浏览器窗口定位的，但是当
元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。,在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。,普通流其实就是指BFC中的FC。FC(
Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。,在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。,除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。,先看下MDN上关于BFC的定义：,具有
BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且
BFC 具有普通容器所没有的一些特性。,通俗一点来讲，可以把
BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。,除了 BFC，还有：,注意：同一个元素不能同时存在于两个
BFC 中。,MDN上对于BFC的触发条件写的很多，总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：,BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。,左列浮动（定宽或不定宽都可以），给右列开启 BFC。,效果： ,,这即是上面说的 BFC 的特性之一：
浮动盒的区域不会和 BFC 重叠,兄弟元素之间的外边距重叠,效果： ,,两个块级元素，红色 div 距离底部 10px，绿色 div 距离顶部 20px，按道理应该两个块级元素相距 30px 才对，但实际却是取距离较大的一个，即 20px。,根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性
overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了。,,这个关于兄弟元素外边距叠加的问题，除了触发 BFC 也有其他方案，比如你统一只用上边距或下边距，就不会有上面的问题。,这种情况存在父元素与其第一个或最后一个子元素之间（嵌套元素）。,如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的外边距分开，此时子元素的外边距会“溢出”到父元素的外面。, 如上图，红色的 div 在绿色的 div 内部，且设置了
margin-top 为 30px，但我们发现红色 div 的顶部与绿色 div 顶部重合，并没有距离顶部 30px，而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px，被子元素溢出影响，外边距重叠，取较大的值，则距离顶部 30px。,解决办法：,这样就能实现我们期望的效果了： ,,当容器内子元素设置浮动时，脱离了文档流，容器中总父元素高度只有边框部分高度。, 解决办法：给父元素触发 BFC，使其有 BFC 特性：
计算 BFC 的高度时，浮动元素也会参与计算,效果如下：
上面我们都是用的
overflow: hidden 触发 BFC，因为确实常用，但是触发 BFC 也不止是只有这一种方法。,如上面写的所示，可以设置
float: left;，
float: right;，
display: inline-block;，
overflow: auto;，
display: flex;，
display: table;，
position 为
absolute 或
fixed 等等，这些都可以触发，不过父元素宽度表现不一定相同，但父元素高度都被撑出来了。,当然实际运用可不是随便挑一个走，还是根据场景选择。,本次的分享就到这里，如果本章内容对你有所帮助的话欢迎
点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！,注意：同一个元素不能同时存在于两个
BFC 中。,

大家好，我是 CoderBin

1. 文档流

在介绍BFC之前，需要先给大家介绍一下文档流。

我们常说的文档流其实分为定位流、浮动流、普通流三种。

2. 绝对定位(Absolute positioning)

如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；

对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。

3. 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

4. 普通流 (normal flow)

普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

5. BFC 概念

先看下MDN上关于BFC的定义：

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

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

除了 BFC，还有：

IFC（行级格式化上下文）- inline 内联
GFC（网格布局格式化上下文）- display: grid
FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中。

6. BFC的触发方式

MDN上对于BFC的触发条件写的很多，总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：

根元素，即 <html>
浮动元素：float 值为 left 、right
overflow 值不为 visible，即为 auto、scroll、hidden
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
绝对定位元素：position 值为 absolute、fixed

7. BFC的特性

BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面的元素。
BFC 内部的块级盒会在垂直方向上一个接一个排列
同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠
每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动
浮动盒的区域不会和 BFC 重叠
计算 BFC 的高度时，浮动元素也会参与计算

8. 应用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

8.1 自适应两列布局

左列浮动（定宽或不定宽都可以），给右列开启 BFC。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .left {
      float: left;
      height: 200px;
      margin-right: 10px;
      background-color: red;
    }
    .right {
      overflow: hidden;
      height: 200px;
      background-color: yellow;
    }
</style>
<div>
  <div class="left">浮动元素，无固定宽度</div>
  <div class="right">自适应</div>
</div>

效果：

将左列设为左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置。
右列为 div 块级元素，利用其自身的流特性占满整行。
右列设置overflow: hidden,触发 BFC 特性，使其自身与左列的浮动元素隔离开，不占满整行。

这即是上面说的 BFC 的特性之一：浮动盒的区域不会和 BFC 重叠

8.2 防止外边距（margin）重叠

兄弟元素之间的外边距重叠

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .child1 {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
  }
  .child2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: green;
  }
</style>
<div>
  <div class="child1"></div>
  <div class="child2"></div>
</div>

效果：

两个块级元素，红色 div 距离底部 10px，绿色 div 距离顶部 20px，按道理应该两个块级元素相距 30px 才对，但实际却是取距离较大的一个，即 20px。

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的较大者，这种行为称为外边距折叠（重叠），注意这个是发生在属于同一 BFC 下的块级元素之间

根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性 overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了。

<style>
.parent {
  overflow: hidden;
}

/* ... */
</style>
<div>
  <div class="parent">
      <div class="child1"></div>
  </div>
  <div class="parent">
      <div class="child2"></div>
  </div>
</div>

这个关于兄弟元素外边距叠加的问题，除了触发 BFC 也有其他方案，比如你统一只用上边距或下边距，就不会有上面的问题。

8.3 父子元素的外边距重叠

这种情况存在父元素与其第一个或最后一个子元素之间（嵌套元素）。

如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的外边距分开，此时子元素的外边距会“溢出”到父元素的外面。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent {
    width: 200px;
    height: 200px;
    background-color: green;
    margin-top: 20px;
  }
  #child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 30px;
  }
</style>
<div id="parent">
  <div id="child"></div>
</div>

如上图，红色的 div 在绿色的 div 内部，且设置了 margin-top 为 30px，但我们发现红色 div 的顶部与绿色 div 顶部重合，并没有距离顶部 30px，而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px，被子元素溢出影响，外边距重叠，取较大的值，则距离顶部 30px。

解决办法：

给父元素触发 BFC（如添加overflow: hidden）
给父元素添加 border
给父元素添加 padding

这样就能实现我们期望的效果了：

8.4 清除浮动解决令父元素高度坍塌的问题

当容器内子元素设置浮动时，脱离了文档流，容器中总父元素高度只有边框部分高度。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .parent {
    border: 4px solid red;
  }
  .child {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

解决办法：给父元素触发 BFC，使其有 BFC 特性：计算 BFC 的高度时，浮动元素也会参与计算

  .parent {
    overflow: hidden;
    border: 4px solid red;
  }

效果如下：上面我们都是用的 overflow: hidden 触发 BFC，因为确实常用，但是触发 BFC 也不止是只有这一种方法。

如上面写的所示，可以设置float: left;，float: right;，display: inline-block;，overflow: auto;，display: flex;，display: table;，position 为 absolute 或 fixed 等等，这些都可以触发，不过父元素宽度表现不一定相同，但父元素高度都被撑出来了。

当然实际运用可不是随便挑一个走，还是根据场景选择。

每文一句：积极者相信只有推动自己才能推动世界，只要推动自己就能推动世界。

本次的分享就到这里，如果本章内容对你有所帮助的话欢迎点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！

1 原创文章作者：4558，如若转载，请注明出处： https://www.52hwl.com/38001.html

2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈

3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)

4 免责声明：本站为个人博客，所有软件信息均来自网络修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别

前端布局之浅谈BFC

1. 文档流

2. 绝对定位(Absolute positioning)

3. 浮动 (float)

4. 普通流 (normal flow)

5. BFC 概念

6. BFC的触发方式

7. BFC的特性

8. 应用

8.1 自适应两列布局

8.2 防止外边距（margin）重叠

8.3 父子元素的外边距重叠

8.4 清除浮动解决令父元素高度坍塌的问题

关于作者

4558注册用户

前端布局之浅谈BFC

1. 文档流

2. 绝对定位(Absolute positioning)

3. 浮动 (float)

4. 普通流 (normal flow)

5. BFC 概念

6. BFC的触发方式

7. BFC的特性

8. 应用

8.1 自适应两列布局

8.2 防止外边距（margin）重叠

8.3 父子元素的外边距重叠

8.4 清除浮动解决令父元素高度坍塌的问题

关于作者

4558注册用户

相关推荐