认认真真的探讨一下BFC

来源：互联网发布：java导入excel进度条编辑：程序博客网时间：2024/05/17 01:28

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/

阅读全文

0 0