BFC是什么？有什么作用？

ranup

已于 2022-05-14 19:48:24 修改

阅读量281

点赞数

分类专栏：面试文章标签： css 前端 html

于 2022-05-14 19:47:58 首次发布

本文链接：https://blog.csdn.net/m0_57533638/article/details/124772932

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BFC

文章目录

定义

块级格式化上下文 (Block Formatting Context，简称：BFC)，它是页面中的一个独立的渲染区域，决定了其子元素如何布局( 不管内部元素如何进行渲染)，都不会影响到盒子外面的其他元素。

常见的FC分为：BFC、IFC、GFC、FFC (后仨了解即可)

BFC的触发条件

根元素<html>；
float属性的值为left、right，不为none；
overflow属性值为hidden、auto、scroll，不为visible；
position属性值为absolute、fixed，不为relative；
display属性值为inline-block、flex、grid、table-cell、table-caption，不为none、inline、block。

BFC的特性

内部的盒子是在垂直方向依次放置的；
在垂直方向上的距离是由margin来控制的；
使用了BFC的区域不会与float的区域重合，并且在计算高度时，浮动的元素也会参与计算；
在BFC容器中的子元素并不会影响到外边元素。

BFC的作用

解决外边距重叠问题 (margin塌陷)；
解决盒子塌陷问题；
清除浮动；
解决浮动环绕文字问题。

解决外边距重叠问题 (margin塌陷)

情况1 (两个独立盒子之间的margin)

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .contain {
    /* 
    开启了BFC
    决定了其子元素如何布局，不会影响到盒子外面的其他元素
    */
    /* 随意哪个都可以 */
    /* overflow: hidden; */
    /* display: flex; */
    /* display: table-cell; */
    /* display: grid; */
    /* 后面的需要用父盒子包裹才可以实现 */
    /* position: absolute; */
    float: left;
  }

  .top {
    /* 添加一个margin的下边距 */
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    background-color: pink;
  }

  .bottom {
    /* 添加一个margin的上边距 */
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: deeppink;
  }
</style>
<body>
  <!-- 添加了overflow: hidden;形成了一个BFC容器
内部子元素的布局，不会影响到盒子外面的其他元素 -->
  <div class="contain">
    <div class="top"></div>
  </div>
  <!-- 
  这里是BFC容器的外面不受他盒子内部的影响
  可以设置父级，也可以不设置容器
  -->
  <!-- <div class="bottom"></div> -->
  <div class="contain">
    <div class="bottom"></div>
  </div>
</body>

在这里插入图片描述

情况2 (父子盒子之间的margin)

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .father {
    /* 开启BFC，子盒子的布局不影响到父盒子 */
    /* 随意哪个都可以 */
    /* overflow: hidden; */
    /* display: flex; */
    /* display: table-cell; */
    /* display: grid; */
    /* position: absolute; */
    float: left;
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }

  .child {
    /* 添加一个margin的上边距 */
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>

在这里插入图片描述

解决盒子塌陷问题

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .father {
    /* 开启BFC，子盒子的布局不影响到父盒子 */
    /* 随意哪个都可以 */
    overflow: hidden;
    /* display: flex; */
    /* display: table-cell; */
    /* display: grid; */
    /* position: absolute; */
    /* float: left; */
    /* height: 100px; */
    width: 100px;
    border: 1px solid black;
    background-color: skyblue;
  }

  .child {
    /* 设置了之后,子盒子脱离了文档流，父盒子高度为0 */
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>

在这里插入图片描述

清除浮动

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .left {
    float: left;
    width: 100px;
    background-color: skyblue;
  }

  .right {
    /* 随意哪个都可以 */
    /* overflow: hidden; */
    /* display: flex; */
    display: grid;
    /* 自适应，自动充满剩余宽度 */
    width: auto;
    /* 绝对定位脱离了文档流，需要设置宽度为100%才行 */
    /* position: absolute; */
    /* 向右移动的距离就是.left盒子的宽度 */
    /* left: 100px; */
    /* top: 0; */
    /* width: 100%; */
    /* 最小高度 */
    min-height: 200px;
    background-color: pink;
  }
</style>
<body>
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</body>

在这里插入图片描述

解决浮动环绕文字问题

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .contain {
    width: 200px;
    border: 1px solid black;
  }

  .box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
  }

  p {
    /* 随意哪个都可以 */
    /* overflow: hidden; */
    /* display: flex; */
    /* display: table; */
    display: grid;
  }
</style>
<body>
  <div class="contain">
    <div class="box"></div>
    <p>解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题</p>
  </div>
</body>