BFC规范

*学习笔记

Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC即Block Formatting Contexts(块级格式化上下文)，它属于上述中的其中一种规范，是 Web 页面的可视化 CSS 渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且BFC具有普通容器所没有的一些特性，可以解决一些布局上的问题。

哪些样式能触发BFC来帮助我们解决哪些问题？

触发BFC的样式：

浮动元素：float除none以外的值

绝对定位：position（absolute、fixed）

display为inline-block、table-cells、flex

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

BFC特性及应用

解决margin叠加问题

<style>

.div1{width: 100px;height: 100px;background: red;margin-bottom: 30px;}

.div2{width: 100px;height: 100px;background: blue;margin-top: 30px;}

</style>

这里只会显示一个30px的距离，上下的margin进行了重叠。

采用上述的触发样式可解决问题，如

.box{overflow: hidden;}

</div>

</div>

解决margin传递问题

<style>

#box1{ width: 200px;height: 200px;background:brown;}

#box2{ width: 100px;height: 100px;background:seagreen;margin-top: 100px; }

</style>

</div>

这里两个div都会向下100px,并不会只是box2向下。

同样的，给box1加上overflow：hidden等即可

解决浮动问题

.div1 {width: 200px; border: 1px solid black;

/* display: inline-block;*/

/* overflow: hidden;*/

}

.div2 {width: 100px;height: 100px;background: blue;float: left;

}

</div>

解决覆盖问题

略