BFC

时间 2019-11-08

标签 bfc 繁體版

原文原文链接

一.定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。浏览器

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。最多见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。ide

二. 触发 BFC

body
根元素
浮动元素：float 除 none 之外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)布局

但其中，最多见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就表明了该元素以及建立了一个BFC了。flex

三. 使用场景

1.利用BFC避免外边距折叠

两元素之间的间距只有100px，也就是重叠了。
若是想要避免外边距的重叠，能够将其放在不一样的 BFC 容器中。

<style>
        .bfc {
            overflow: hidden;
        }
        .bfc div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 100px;
        }
</style>
<body>
    <div class="bfc">
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

2.BFC 清除浮动

浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。若是一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。咱们一般会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。
code

<style>
        .container {
            border: 2px solid rebeccapurple;
        }
        .container div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 10px;
            float: left;
        }
</style>
<body>
    <div class="container">
        <div></div>
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

在上面这个例子中，容器没有任何高度，而且它包不住浮动子元素，容器的高度并不会被撑开。为解决这个问题，能够在容器中建立一个BFC：
.container { overflow: hidden; border: 2px solid rebeccapurple; }orm

3. 使用BFC避免文字环绕

.container {
            width:300px;
        }
        .floated {
            float: left;
            width:50px;
            height: 50px;
            background: red;
   }
<div class="container">
        <div class="floated">
            Float
        </div>
        <p>
            jaaahahhahahhaha Quae hic ut ab perferendis sit quod architecto, 
            dolor debitis quam rem provident aspernatur tempora
            expedita.
        </p>
</div>

p 元素没有移位但它叠在了浮动元素之下，而p元素的文本(行盒子)却移位了，行盒子水平变窄来给浮动元素腾出了空间。随着文本的增长，最后文本将环绕在浮动元素之下，由于那时候行盒子再也不须要移位，也就成了图中的样子。
此时只要把p设置成BFC 就能够避免文字环绕blog

4. 全屏多列布局防止浏览器属性换行

若是咱们建立一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这多是由于浏览器四舍五入了列宽从而全部列的总宽度会超出容器。但若是咱们在多列布局中的最后一列里建立一个新的BFC，它将老是占据其余列先占位完毕后剩下的空间rem

<div class="container">
        <div class="column">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
</div>
.column {
            width: 31.33%;
            background-color: yellowgreen;
            float: left;
            margin: 0 1%;
  }

最后一个元素用BFC文档

.column:last-child {
    float: none;
overflow: hidden; 
}

BFC

一.定义

二. 触发 BFC

三. 使用场景

1.利用BFC避免外边距折叠

2.BFC 清除浮动

3. 使用BFC避免文字环绕

4. 全屏多列布局防止浏览器属性换行