怎么理解BFC？BFC有什么作用？

最新推荐文章于 2024-08-03 17:34:58 发布

yuayu121

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量281

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_57126801/article/details/125935700

版权

BFC概念

BFC(Block formatting context)

直译为“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。（解释有点官方，看着有点迷糊）

（老师上课文档的理解方式）可以把BFC理解成一块独立的渲染区域。BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

（个人理解,勿喷，如有错误请指正）BFC可以理解为一种解决布局问题的方法，当一个父元素中的子元素因布局原因会影响到父元素旁边的其他元素时（或者说元素因布局会影响到其他元素可为他们添加一个父元素），通过设置一些css样式隔离外部其他元素，互不影响。
而这些css样式我感觉这个就是所说的“触发BFC的属性”：
比如：
1.float不为none
2. postion为fixed或absolute
3.overflow为auto scroll和hidden
4.display的值为inline-block，table-cell

BFC的作用：
1.可以避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖
…
举个例子：

 .father {
        width: 200px;
        height: 200px;
        border: 2px solid red;
      }
      .son1 {
        width: 150px;
        height: 150px;
        background-color: aqua;
        float: left;
      }
      .son2 {
        width: 150px;
        height: 150px;
        background-color: green;
        float: left;
      }
      .son3 {
        width: 150px;
        height: 150px;
        background-color: blue;
      }
      .son4 {
        width: 150px;
        height: 150px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son1"></div>
      <div class="son2"></div>
    </div>
    <div class="son3"></div>
    <div class="son4"></div>
  </body>

效果图：
在这里插入图片描述
由于父元素中的子元素设置的浮动，又因为父元素的宽度不足导致子元素向下排列，结果盖住了父元素旁边的其他元素。
此时便可利用上面列举的“触发BFC的属性”进行解决（个人感觉就是通过css属性去隔离对外部元素的影响）。
解决方法：
在这里插入图片描述
在父元素css样式中加入overflow：scroll；（为父元素添加滚动条）；
结果图：

也可用BFC来解决浮动导致的父元素塌陷问题；

/*css代码部分*/
 .cube {
        width: 100px;
        height: 100px;
        background-color: aqua;
        float: left;
        margin: 10px;
      }
      .container {
        /* overflow: hidden; */
        border: 1px solid #000;
      }

  <div class="container">
      <div class="cube"></div>
      <div class="cube"></div>
    </div>