【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用

文章首发于掘金

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

想要实现一个BFC布局需要满足以下条件之一：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

想要创建一个BFC有很多方式，但是一些方式可能会带来其他的麻烦，例如overflow:scroll等，所以使用的时候还是要注意一下，本文统一使用overflow:hidden来创建BFC。

1. bfc区域不会与float box 重叠

<style>
        body {
            width: 300px;
            position: relative;
        }

        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #666666;
        }

        .main {
            height: 200px;
            background: #fcc;
        }
    </style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

image.png
如果我们想要的效果是两个盒子分开，那么我们可以利用BFC的布局规则：BFC区域不会与float box重叠的原则，我们给main加上overflow:hidden的属性，神奇的事情发生了：
image.png

2. 计算bfc高度的时候，浮动元素也参与计算

 <style>
        body {
            width: 500px;
        }

        .par {
            border: 5px solid #fcc;
            /* 下面几种方式都会生成bfc */
            /* overflow: hidden; */
            /* display: inline-block; */
            /* position: absolute; */
            /* float: left; */
        }

        .child {
            border: 5px solid #f66;
            width: 100px;
            height: 100px;
            float: left;
        }

    </style>

image.png

上述代码因为浮动，会出现par高度塌陷的情况，为了达到清除内部浮动，我们可以触发par生成bfc,那么par在计算高度的时候，par内部的浮动元素child也会参与计算，所以我们给par加上overflow:hidden的属性后问题就解决了。
image.png

3. 属于同一个bfc的两个相邻box的margin会发生重叠

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        margin: 100px;
    }
</style>

<body>
        <p>haha</p>
        <p>hehe</p>
</body>

image.png
正常我们给两个p 标签都加上了margin:100px，但是两个p之间只有100px,为什么呢，同一个BFC环境时候，重叠的margin只去最大的，所以如果想解决这个问题，我们可以把下面的p标签包一层BFC。

    <style>
 p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        margin: 100px;
    }
  .warp {
            overflow: hidden;
        }
    </style>
    <p>haha</p>
    <div class="warp">
        <p>hehe</p>
    </div>

总结BFC的三种特性

  1. bfc区域不会与float box 重叠
  2. 计算bfc高度的时候，浮动元素也参与计算
  3. 属于同一个bfc的两个相邻box的margin会发生重叠
posted @ 2019-02-22 17:10  -宇泽-  阅读(301)  评论(0)  编辑  收藏  举报