一篇彻底理解BFC

什么是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的区域不会与浮动元素的box重叠。

可以用来实现自适应两栏布局(之前文章有提到):给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是一个独立的容器,外面的元素不会影响里面的元素。

应用:

  1. 防止浮动导致父元素高度塌陷
  2. 避免外边距折叠
  3. 清除浮动
  4. 实现一些布局
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页