css中BFC有什么作用

这篇文章主要介绍“css中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css中BFC有什么作用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

10年积累的网站建设、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有邛崃免费网站建设让你可以放心的选择与我们合作。

什么是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会折叠。