手把手教会你-BFC的原理及作用-清除内部浮动/自适应布局/防止垂直margin重叠

高阳很捷迅

已于 2022-10-08 15:06:55 修改

阅读量438

点赞数 1

于 2022-10-08 14:59:20 首次发布

本文链接：https://blog.csdn.net/weixin_43805705/article/details/127208833

版权

前端开发专栏收录该内容

39 篇文章 2 订阅

订阅专栏

前端开发页面过程中，当布局出现浮动元素的时候，会经常用到这行CSS代码（overflow: hidden）。它的作用是【清除浮动】，能帮助解决界面布局中遇到的不少问题，比如：高度塌陷，垂直边距重叠，自适应布局等。那么，大家知道是什么原因让它能发挥如此强大的作用呢？下面我们来了解一下吧~

一、什么是BFC

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译为格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。

这里重点讲一下BFC（block formatting context），直译为块级格式化上下文，简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素主要受该浮动元素影响，两个浮动元素之间是互不影响的。也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

二、BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

三、形成 BFC 的条件

满足下列条件之一就可触发BFC：

1、根元素

2、浮动元素，float 除 none 以外的值

3、绝对定位元素，position（absolute，fixed）

4、display 为以下其中之一的值（inline-block、table-caption、inline-flex、inline-grid）

5、overflow 除了 visible 以外的值（hidden，auto，scroll）

四、BFC的作用

1、清除内部浮动

解决【高度塌陷问题】

在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素，浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度。所以父元素发生了高度坍塌。

代码：

<style>
  .par {
    border: 5px solid #fcc;
    width: 300px;
  }
  
  .child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

页面效果：

根据BFC布局规则第6条：计算BFC的高度时，浮动元素也参与计算。

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

代码：

.par {
  overflow: hidden;
}

效果如下：

2、自适应两列布局

解决【 div浮动兄弟遮盖问题】

由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。

代码：

<style>
  body {
    width: 300px;
    position: relative;
  }
  
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }
  
  .main {
    height: 200px;
    background: #fcc;
  }
</style>
<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>

页面效果：

根据BFC布局规则第3条：

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第4条：BFC的区域不会与float box重叠。

我们可以通过通过触发main生成BFC，来实现自适应两栏布局。

代码：

.main {
  overflow: hidden;
}

当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。

效果如下：

3、防止垂直margin重叠

解决【margin塌陷问题】

在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。

代码：

<style>
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <p>Hehe</p>
</body>

页面：

两个p之间的距离为100px，发生了margin重叠，距离只显示了100px。

根据BFC布局规则第2条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了，距离显示为200px。

代码：

<style>
  .wrap {
    overflow: hidden;
  }
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <div class="wrap">
    <p>Hehe</p>
  </div>
</body>

效果如下:

高阳很捷迅

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
手把手教会你-BFC的原理及作用-清除内部浮动/自适应布局/防止垂直margin重叠

前端开发页面过程中，当布局出现浮动元素的时候，会经常用到这行CSS代码（overflow: hidden）。它的作用是【清除浮动】，能帮助解决界面布局中遇到的不少问题，比如：高度塌陷，垂直边距重叠，自适应布局等。那么，大家知道是什么原因让它能发挥如此强大的作用呢？下面我们来了解一下吧~
复制链接

扫一扫

专栏目录