了解BFC

前言

这是一篇笔记,因为一直对这部分的知识看了就忘,今天闲着无事翻了翻不少资料,所以有了这篇文章

怎么理解BFC

首先,我们要知道BFC的全称是Block Formatting Context,翻译成中文是块级格式化上下文,这里介绍下怎么理解Formatting Context,Formatting Context实际上是一种上下文环境,在这个上下文里的元素会与外界隔离,并且按照这个上下文里的规则排序和渲染,Block Formatting Context就是一种上下文,其他上下文还有

  • Inline formatting context : 行内格式化上下文
  • flex formatting context : 设置了display为flex创建的上下文
  • grid formatting context : 设置了display为grid创建的上下文

怎么创建BFC

常见:

  • 根元素(html元素)
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • overflow 值不为 visible 的块元素
  • 行内块元素(元素的 display 为 inline-block
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)

不常见:

  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)

  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)

  • 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)

  • display 值为 flow-root 的元素

  • contain 值为 layout、content 或 paint 的元素

  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)

  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

BFC内部的元素排序规则

  • 在普通流下的BFC内部的块级盒会在垂直方向上一个接一个排列。
  • 同一BFC下的相邻块级元素会发生垂直方向的外边距折叠
  • BFC是一个独立的容器外面的元素不会影响BFC内部反之亦然。

形成了BFC元素的特殊性质

  • 计算BFC元素的高度时,浮动元素也会参与计算。
  • 浮动盒的区域不会和BFC元素重叠。

BFC的常见用处

自适应两栏布局

利用的是浮动盒的区域不会和BFC元素重叠这个特性

<style>
    .left {
        width: 100px;
        height: 200px;
        background-color: darkseagreen;
        float: left;
    }
    .right {
        height: 200px;
        background-color : cornflowerblue;
        // 触发BFC 让这个div不和左边的的div重叠
        overflow: hidden;
    }
</style>
<body>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>

处理margin重叠

因为同一BFC下的相邻块级元素会发生垂直方向的外边距折叠,所以只要让两个块元素不在同一个BFC下就可以处理margin重叠的问题了

兄弟元素间的margin重合

<style>
    .p {
        background: aquamarine;
        margin: 100px 0;
        height: 100px;
    }
    .wrapper {
        // 触发BFC
        overflow: hidden;
    }
</style>
<body>
    <p class="p">p1</p>
    <div class="wrapper">
        <p class="p">p2</p>
    </div>
</body>

父子元素间的margin重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p {
            background: aquamarine;
            margin: 100px 0;
            height: 100px;
        }
        .wrapper {
            overflow: hidden;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<!--    <p class="p">p1</p>-->
    <div class="wrapper">
        <p class="p">p2</p>
    </div>
    <div>rua</div>
<!--    <p class="p">p1</p>-->
</body>
</html>

处理浮动引起的高度塌陷

这里使用的是计算BFC元素的高度时,浮动元素也会参与计算这个特性。

<style>
    .container {
        border: 1px solid black;
        overflow: hidden;
    }
    .left {
        width: 100px;
        height: 150px;
        background-color: darkseagreen;
        float: left;
    }
</style>
<body>

<div class="container">
    <div class="left">left</div>
</div>
</body>

参考链接

MDN-BFC
MDN-IFC
MDN-forrmat context
行内格式化上下文介绍
什么是BFC

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00