BFC规范及应用

概念

Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块

渲染区域,并且有一套渲染规则, 它决定了其子元素将如何定位，以及和其他元素的关系和相

互作用。

BFC即Block Formatting Contexts (块级格式化上下文) , 它属于上述中的其中一种规范。

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面

的元素，并且BFC具有普通容器所没有的一些特性。

特性

1、内部的Box会在垂直方向，从顶部开始一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3、在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此

4、BFC的区域不会与float box叠加

5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

6、计算BFC的高度时，浮动元素也参与计算

如何触发BFC

浮动元素：float除none以外的值（left,right）

绝对定位元素：position（absolute，fixed）

display为inline-block、table-cells、flex

overflow除了visible以外的值（hidden，auto，scroll）

 BFC规范的应用

1.margin叠加问题

.div1{
    width: 100px;
    height: 100px;
    background: fuchsia;
    margin-bottom: 20px;
}
.div2{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    margin-top: 20px;
}
.box{
    /* 触发BFC，解决margin叠加问题 */
    overflow: hidden;
}

触发BFC后，margin由触发前（margin叠加）的20px变为了40px

 

 2.margin传递

.wrap{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    /* 触发BFC */
    /* overflow: hidden; */
    position: absolute;
}
.content{
    width: 50px;
    height: 50px;
    background: rebeccapurple;
    /* margin传递，影响父容器 */
    margin-top: 30px;
}

 观察下图（左图是触发BFC前的，右图是触发之后的）

3.浮动问题

.div1{
    width: 200px;
    border: 10px solid blue;
    /* 触发BFC */
    float: left;
    /* display: inline-block; */
    /* overflow: hidden; */
}
.div2{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

观察下图（左图是触发BFC前的，右图是触发之后的） 

 

 4.覆盖问题

.div3{
    width: 100px;
    height: 100px;
    background: rosybrown;
    /* 浮动影响了div4 */
    float: left;
}
.div4{
    height: 200px;
    background: sienna;
    color: #fff;
    /* 触发BFC */
    overflow: hidden;
    /* float: left; */
}

编程（biān chéng）是编定程序的中文简称，就是让计算机代为解决某个问题，对某个计算体系规定一定的运算方式...

 观察下图（上图是触发BFC前的，下图是触发之后的）