BFC原理与应用-优快云博客

1.BFC的概念

BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。

2.BFC 的原理/BFC的布局规则

BFC 的原理，其实也就是 BFC 的渲染规则。包括：

（1）BFC 内部的子元素，在垂直方向，边距会发生重叠,就是间距采用margin值大地那个，而不是叠加在一起

（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。

（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
（4）计算BFC的高度时，浮动的子元素也参与计算。

3.如何生成BFC

有以下几种方法：

方法1：overflow: 不为vidible，可以让属性是 hidden、auto

方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。

方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。

方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

4.参考链接：

5.BFC 原理解释说明

(1)解决 margin 重叠

当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建BFC。

<div class="father" style="overflow: hidden">
    <p class="son" >
    </p>
</div>

应用原理第二条：BFC区域是一个独立的区域，不会影响外里面的元素。

(2)清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .father-layout {
            background: pink;
        }

        .father-layout .left {
            float: left;
            width: 100px;
            height: 100px;
            background: green;
        }

        .father-layout .right {
            height: 150px;  /*右侧标准流里的元素，比左侧浮动的元素要高*/
            background: red;
        }

    </style>
</head>
<body>

<section class="father-layout">
    <div class="left">
       李雪
    </div>
    <div class="right">
        右侧李天下
    </div>
</section>

</body>
</html>

上图中，由于左侧的小绿块浮动了。所以下面的红色块就上去了，有一部分在绿块下面

如果要解决这个问题，可以将右侧的元素创建BFC，应用原理第三条：BFC区域不与float box区域重叠。解决办法如下：（将right区域添加overflow：auto属性）

(3)清除浮动

现在有下面这样的结构：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .father {
            background: pink;
        }

        .son {
            float: left;
            background: green;
        }

    </style>
</head>
<body>

<section class="father">
    <div class="son">
        我是李天下
    </div>

</section>
</body>
</html>