什么是BFC？用来解决什么问题？什么情况下开启BFC？

YIruizZ

已于 2024-07-15 17:24:42 修改

阅读量511

点赞数 22

文章标签：前端 javascript html css css3

于 2024-07-05 16:16:06 首次发布

本文链接：https://blog.csdn.net/yyf8259/article/details/140198394

版权

3.如何解决margin 合并、margin塌陷

4.高度塌陷，代码演示

讲解BFC之前，我们先简单说一下行盒和块盒。

1.行盒和块盒

   什么是行盒呢？span、a这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是水平排布的，并且会有以下特性。
1.不能设置宽高。2 可以设置padding，水平方向有效。但是垂直方向不会占据实际空间 3.border边框同理。4。margin外边距同理。
   什么是块盒呢？div、H1、table、ul这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是垂直排布的，宽高、边框、内外边距都会生效。
   根据html语义化来讲，行元素一般是展示具体的内容，然后再用块元素做具体的规划布局。在某一块区域内元素的排布，可能会遇到各种各样的问题，如何解决呢？这就引出了BFC的概念。

2.什么是BFC呢？

官方解释：区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
大白话就是说，你可以把BFC看做一个独立的区域，这个区域以内的元素不会收到区域以外元素的影响。

3.什么情况下开启BFC？

大家都知道常规的块盒的排列方式，都是纵向依次排列，这就会产生不可避免的几个问题。
1.内部相邻的元素margin会合并。

2.区域内的首尾子元素可能会产生margin塌陷。

3.子元素设置浮动后会被父元素无视，产生高度塌陷。
而BFC的出现就是为了解决这些问题。

4.如何开启BFC？

1.overflow: hidden;
2.display: flex;
3.该区域作为felx的item项
4.position: absolute;
5.position: fixed;
6.作为根元素（html）

5. 代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       .par {
        width: 200px;
        background-color: orchid;
		display: flex;
		flex-direction: column;
        /*
		需要注意的是，这些开启BFC的属性，要根据实际的应用场景来使用，以下只是为了演示效果
		 overflow: hidden;
		比如使用position来开启BFC，就会使该元素脱离文档流。
		position: absolute;
		position: fixed;
		上述属性只能解决margin塌陷的问题，下面可以解决margin塌陷，和margin合并问题
		display: flex;
		flex-direction: column;
		 */
      }

      .child {
        width: 100px;
        height: 100px;
		/* 使用margin来展示上述的几个问题 */
        margin: 20px;
      }
      .box1 {
        background-color: aqua;
      }
      .box2 {
        background-color: brown;
      }
      .box3 {
        background-color: rgb(13, 51, 241);
      }
      .external {
        width: 200px;
        height: 10px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="external"></div>
    <div class="par">
      <div class="child box1"></div>
      <div class="child box2"></div>
      <div class="child box3"></div>
    </div>
   <div class="external"></div>
  </body>
</html>

1.margin塌陷

再上述代码中我们看到，当给子元素设置margin后，父元素的首尾就产生了塌陷，不会撑开父元素的高度。检查元素的时候发现也确实如此。

2.margin 合并

当两个相邻的元素都设置了margin，浏览器渲染的时候会取两个margin的最大值来展示，并不会将两个margin相加，所以我们看到图中的相邻的两个元素的margin不是40px，而是20px

3.如何解决margin 合并、margin塌陷

给.par添加 overflow: hidden;、position: absolute;、position: fixed;或者display: flex; flex-direction: column; 也可以让这块区域作为felx布局的子项。

4.高度塌陷，代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .par {
        width: 500px;
        background-color: orchid;
      }

      .child {
        width: 100px;
        height: 100px;
		/* 给子元素添加float 浮动 */
		float: left;
      }
      .box1 {
        background-color: aqua;
		
      }
      .box2 {
        background-color: brown;
		
      }
      .box3 {
        background-color: rgb(13, 51, 241);
      }
      .external {
        width: 200px;
        height: 10px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="par">
      <div class="child box1"></div>
      <div class="child box2"></div>
      <div class="child box3"></div>
    </div>
  </body>
</html>

先来解释一下为什么会产生高度塌陷，当子元素设置了float后，就脱离了文档流，此时父元素内就没有子元素的高度，浏览渲染的时候就不会把子元素的高度计算在内，所以父元素高度就为0（注意不是消失了，是高度为0）；此时开启bfc，就会解决上述问题。当然由于子元素设置了float，所以它们并不会纵向排列。还可设置伪元素来解决高度塌陷，注意伪元素是行内，要设置display: block;

YIruizZ

关注

22
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
什么是BFC？用来解决什么问题？什么情况下开启BFC？

什么是行盒呢？span、img、a这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是的，并且会有以下特性。1.不能设置宽高。2 可以设置padding，水平方向有效。但是垂直方向不会占据实际空间 3.border边框同理。4。margin外边距同理。什么是块盒呢？div、H1、table、ul这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是的，宽高、边框、内外边距都会生效。根据来讲，行元素一般是展示具体的内容，然后再用块元素做具体的规划布局。。
复制链接

扫一扫