扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关css中的BFC有哪些作用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联是一家专业提供梅县企业网站建设,专注与网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为梅县众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
而 Block Formatting Contexts (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)
块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。
1、 同一个 BFC 下外边距会发生折叠
也就是说，两个相邻的普通流中的块元素垂直方向上的 margin会折叠。
这里两个p的外边距为100px，而不是200px。之所以发生外边距折叠，是因为他们同属于 body这个根元素。
利用BFC可以消除Margin Collapse
BFC导致了margin collapse，而现在又要用它来解决margin cllapse.但是始终要记住一点：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase.如果它们属于不同的BFC，则不会有margin collapse.因此我们可以再建立一个BFC去阻止margin collpase的发生。
2、 BFC 可以包含浮动的元素（清除浮动）
正常情况下，浮动的元素会脱离普通文档流，使父元素高度坍塌。即外层的p会无法包含内部浮动的p。