认认真真的探讨一下BFC-CSDN博客

本文链接：https://blog.csdn.net/sinat_25127047/article/details/76626146

1、什么时候会出现BFC？

浮动元素 float:left;
表格元素：display:table;
绝对定位元素：display:absolute/fixed
行内元素:display:inline-block;
overflow不为visible的值 overflow:hidden/scroll

BFC的作用

BFC的作用大着呢，BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

1.避免margin重叠

css
     .container {
            background-color: red;
            /*overflow: hidden;*/
            /* creates a block formatting context */
        }

        p {
            background-color: lightgreen;
            margin: 10px 0;
        }

html

   <div class="container">
        <p>Sibling 1</p>
        <p>Sibling 2</p>
        <p>Sibling 3</p>
    </div>

这里虽然设置了margin:10px，但是发现上下元素的margin重叠了
如图所示，本来想的是间距应该是20px，但是只有10px了。
这里写图片描述
这里就需要用一个bfc就能解决问题

    <div class="container">
        <p>Sibling 1</p>
        <p>Sibling 2</p>
        <div class="bfc">
            <p>Sibling 3</p>
        </div>
    </div>

    .bfc {
            overflow: hidden;
        }

这里写图片描述
看最后一个元素加了bfc，就有效果了。

解决父元素塌陷问题

  <div class="container">
        <div>Sibling</div>
        <div>Sibling</div>
    </div>

    .container {
            background-color: green;
        }

    .container div {
            float: left;
            background-color: lightgreen;
            margin: 10px;
        }

这里写图片描述

看这段代码，我们在container内部实现了一个float，其实这两个div就是一个BFC了；
所以我的理解就是它脱离了container这个盒子，但是container这个盒子的高度需要靠里面的内容来撑，所以现在它里面都木有内容了，因此也就塌陷了….
如果不加float，（当然这两个元素也不会并列），这个时候container和这两个div在同一个BFC中（根元素BFC）
这里写图片描述

BFC导致的问题由BFC来解决
给container也加一个BFC；

  .container {
            background-color: green;
            overflow: hidden;
        }

效果立现：
这里写图片描述

这里我有一点想不明白：既然container是一个BFC，里面的div是另一个BFC吗？还是在同一个BFC中了？

3.解决文本环绕问题


        .container {
            width: 500px;
            min-height: 280px;
            border: 1px solid #aaa;
            padding: 10px;
        }

        .floated {
            float: left;
        }
    </style>
</head>

<body>
    <!--bfc的创建-->

    <div class="container">
        <div class="floated">
            <img src="../img/01.png" alt="图像">
        </div>

        <p>In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink dueto
            the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
        </p>
    </div>

</body>

就像这样文本会围绕图片。

这里写图片描述
这里图片还是设置了一个float:left 然后这个文本就会围绕这个图片来布局。。。
因为p是流动的，我们可以认为它找到一点位置就把它填满；

给p弄成一个BFC，就可以解决问题了

    p {
            overflow: hidden
        }

这里写图片描述

原文参见 https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/