这篇文章主要介绍“css3中bfc的概念是什么”，在日常操作中，相信很多人在css3中bfc的概念是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3中bfc的概念是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
为兰溪等地区用户提供了全套网页设计制作服务，及兰溪网站建设行业解决方案。主营业务为成都做网站、网站制作、成都外贸网站建设、兰溪网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
在css3中，BFC的中文意思为“块格式化上下文”，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 BFC的作用：1、解决外边距折叠问题；2、BFC的区域不会与浮动的元素区域重叠，可创建CSS中常用的两栏布局；3、清除元素内部的浮动。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
官方定义：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
说人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。我们经常使用到BFC，只不过不知道它是BFC而已。
常用的方式有以下几种：
浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display:inline-block，display:table-cell，display:flex，display:inline-flex
overflow指定除了visible的值
看吧，是不是经常在代码中用到上边列举的属性，你在不知不觉中就开启了BFC，只是你不知道它是BFC而已。
在BFC中，块级元素从顶端开始垂直地一个接一个的排列。（当然了，即便不在BFC里块级元素也会垂直排列）
如果两个块级元素属于同一个BFC，它们的上下margin会重叠（或者说折叠），以较大的为准。但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。
BFC的区域不会与浮动的元素区域重叠，也就是说不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，浮动元素也参与计算。BFC可以包含浮动元素。（利用这个特性可以清除浮动）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1、解决外边距折叠问题
外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
html：
css：
.div1 {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 10px;
}
.div2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
}对第一个div的margin-bottom设置为10px，第二个div的margin-top设置为20px，我们可以看到两个盒子最终的边距是20px，是两者之中较大的一个。这就是外边距重叠的问题。
为了解决这个问题，我们可以让这两个div分属于不同的BFC，或者只要把其中一个div放到BFC中就可以。原因是：BFC就是页面上的一个隔离的独立容器，容器里面的元素不会对外边产生影响。
html：
