什么是BFC？css中的BFC有什么用？

　　什么是BFC（BlockFormattingContext）

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

　　而BlockFormattingContexts(BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

　　BFC的布局规则如下：

　　 1.内部的盒子会在垂直方向，一个个地放置；

　　 2.BFC是页面上的一个隔离的独立容器；

　　 3.属于同一个BFC的两个相邻Box的上下margin会发生重叠；

　　 4.计算BFC的高度时，浮动元素也参与计算

　　 5.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

　　 6.BFC的区域不会与float重叠；

　　那么如何触发BFC呢？只要元素满足下面任一条件即可触发BFC特性：

　　body根元素；

　　浮动元素：float不为none的属性值；

　　绝对定位元素：position(absolute、fixed)

　　display为：inline-block、table-cells、flex

　　overflow除了visible以外的值(hidden、auto、scroll)

　　BFC到底有什么用呢？

　　块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

　　1、同一个BFC下外边距会发生折叠

　　也就是说，两个相邻的普通流中的块元素垂直方向上的margin会折叠。

　　<style>

　　.p{

　　width:200px;

　　height:50px;

　　margin:100px0;

　　background-color:red;

　　}

　　</style>

　　<body>

　　<divclass="p"></div>

　　</body>

　　这里两个p的外边距为100px，而不是200px。之所以发生外边距折叠，是因为他们同属于body这个根元素。

　　利用BFC可以消除MarginCollapse

　　BFC导致了margincollapse，而现在又要用它来解决margincllapse.但是始终要记住一点：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase.如果它们属于不同的BFC，则不会有margincollapse.因此我们可以再建立一个BFC去阻止margincollpase的发生。

　　<divclass="p"></div>

　　<divclass="wrap">

　　<divclass="p"></div>

　　</div>

　　.wrap{

　　overflow:hidden;

　　}

　　.p{

　　width:200px;

　　height:50px;

　　margin:100px0;

　　background-color:red;