BFC是什么？

深藏阁楼爱情的钟 2022-11-19 01:17 173阅读 0赞

### BFC简介 ###

> BFC全称Block Formatting Context，名为“块级格式化上下文”。  
> BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性。

### 怎样触发BFC ###

> overflow: hidden  
> display: inline-block  
> position: absolute  
> position: fixed  
> display: table-cell  
> display: flex

### BFC规则 ###

> BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列  
> BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签  
> 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠  
> 计算BFC的高度时，浮动元素也参与计算

### BFC解决了什么问题 ###

#### 使用Float脱离文档流，高度塌陷 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>高度塌陷</title>
        <style>
            .box {
         
                margin: 100px;
                width: 100px;
                height: 100px;
                background: red;
                float: left;
            }
            .container {
         
                background: #000;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
    </html>

#### Margin边距重叠 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Margin边距重叠</title>
        <style>
            .box {
         
                margin: 10px;
                width: 100px;
                height: 100px;
                background: #000;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <p><div class="box"></div></p>
        </div>
    </body>
    </html>

#### 本文介绍 ####

> [转载地址][Link 1]

[Link 1]: https://juejin.cn/post/6950082193632788493