BFC - 简书

BFC

BFC(Block Formatting Context) 块级格式化上下文

了解BFC之前先说明一些概念

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流

块盒独占一行，根据位置至上而下依次布局
行盒依次水平排列，行满时换行

浮动
定位

理解bfc

可以把bfc看作页面的一个渲染区域，它拥有自己的渲染规则（可以理解为：拥有bfc的元素可以看作为隔离了的独立容器，容器里面的元素不会影响到外面的元素）

如何触发bfc

image.png

bfc的特性（作用）

解决上下margin合并问题

    <style>
        .demo {
            height: 100px;
            margin: 100px;
            background-color: pink;
        }
    </style>
    本来200的margin变为了100
    <div class="demo"></div>
    <div class="demo"></div>
  

    触发BFC
    <style>
        .demo {
            height: 100px;
            margin: 100px;
            background-color: pink;
        }
        .wrap {
            overflow: hidden;
        }
    </style>
    
    <div class="demo"></div>
    <div class="wrap">
        <div class="demo"></div>
    </div>

    我们经常不会用这种方式解决外边距的合并问题，而是给其中一个元素设置margin-top: 200px || margin-bottom: 200px

解决浮动造成盒子坍塌的问题

    <style>
        .wrap {
            border: 1px solid;
            overflow: hidden;   // 添加能触发bfc的属性
            /*float: left;
            position: absolute;*/
        }
        .item {
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
    </style>

    <div class="wrap">
        <div class="item"></div>
    </div>

  我们经常不会使用这种方法清除浮动， 定位和浮动会脱离正常文档流，  overflow: hidden;也有一定的副作用
最好的清除方法

      .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

阻止元素被浮动元素覆盖(自适应两栏布局)

    <style>
        .a {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .b {
            /*overflow: hidden;*/    添加能触发bfc的属性后 a 元素没有覆盖b元素(实现了自适应两栏布局)
            height: 200px;
        }
    </style>

    <div class="a"></div>
    <div class="b"></div>