什么是BFC？什么条件下会触发？应用场景有哪些？

时间 2020-07-17

标签什么 bfc 条件下触发应用场景哪些繁體版

原文原文链接

1.什么是BFC？

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

2.触发条件

一个HTML元素要建立BFC，则知足下列的任意一个或多个条件便可：下列方式会建立块格式化上下文：bash

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 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）
overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

3.BFC渲染规则

BFC是一个独立的容器，外面的元素不会影响里面的元素
计算BFC高度的时候浮动元素也会参与计算
BFC的区域不会与浮动元素的box重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

4.应用场景

1.防止浮动元素高度塌陷

不适用BFC状况下，子元素使用浮动，父元素高度会塌陷布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            height: 50px;
            width: 50px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>
</html>
复制代码

将父级元素设为BFC后

.container {
    overflow: hidden;
}
复制代码

以上状况应用规则计算BFC高度的时候浮动元素也会参与计算

2.避免外边距折叠

当2个box在同一个BFC容器内，同时使用margin会引发外边距重合flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="inner">div2</div>
        <div class="inner">div3</div>
    </div>
</body>
</html>
复制代码

此时将box变为BFC，增长以下样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
        .bfc {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="bfc">
            <div class="inner">div2</div>
        </div>
        
        <div class="inner">div3</div>
    </div>
</body>
</html>
复制代码

以上状况应用规则 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.自适应两栏布局

根据规则BFC的区域不会与浮动元素的box重叠，能够实现自适应两栏布局ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .left{
        width: 500px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
       }
       .right{
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
       }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>
复制代码

总结

以上都体现了spa

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。3d