一篇彻底理解BFC

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

Y or Z

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

阅读量253

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/HZ___ZH/article/details/110066359

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是BFC

W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context，即块级格式上下文）。

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

触发BFC

float的值不是none。
position的值不是static或者relative。
行内块元素（元素的 display 为 inline-block）
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible
网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

BFC渲染规则

1. 同一个 BFC 下垂直方向会发生外边距折叠

因为两个 div 元素都处于同一个 BFC 容器下 ( body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。
在这里插入图片描述

p{
    width: 100px;
    height: 100px;
    background: rgb(129, 236, 57);
    border: 1px solid black;
    margin: 100px;
}

     <p></p>
      <p></p>

如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

p{
    width: 100px;
    height: 100px;
    background: rgb(129, 236, 57);
    border: 1px solid black;
    margin: 100px;
}
.box{
    overflow: hidden;
}

<body>
    <p></p>

    <div class="box">
        <p></p>
    </div>
  </body>

在这里插入图片描述

2. BFC的区域不会与浮动元素区域重叠。

可以用来实现自适应两栏布局(之前文章有提到)：给right盒子设置使用overflow属性来触发bfc

3.计算BFC高度的时候浮动元素也会参与计算

在这里插入图片描述

<style>
.box1{
    width: 200px;
    border: 1px solid black;
   
}
.box2{
    border: 3px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
}
</style>



<div class="box1">
    <div class="box2"></div>
</div>

给box1设置overflow: hidden;清除浮动

在这里插入图片描述

.box1{
    width: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.box2{
    border: 3px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
}
</style>



<div class="box1">
    <div class="box2"></div>
</div>

4. 以上都体现了：bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。。