css3中bfc的概念是什么

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

为兰溪等地区用户提供了全套网页设计制作服务，及兰溪网站建设行业解决方案。主营业务为成都做网站、网站制作、成都外贸网站建设、兰溪网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在css3中，BFC的中文意思为“块格式化上下文”，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 BFC的作用：1、解决外边距折叠问题；2、BFC的区域不会与浮动的元素区域重叠，可创建CSS中常用的两栏布局；3、清除元素内部的浮动。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

一、什么是BFC

官方定义：BFC（Block Formatting Context）块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

说人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。我们经常使用到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里块级元素也会垂直排列）
如果两个块级元素属于同一个BFC，它们的上下margin会重叠（或者说折叠），以较大的为准。但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。
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，是两者之中较大的一个。这就是外边距重叠的问题。

css3中bfc的概念是什么

为了解决这个问题，我们可以让这两个div分属于不同的BFC，或者只要把其中一个div放到BFC中就可以。原因是：BFC就是页面上的一个隔离的独立容器，容器里面的元素不会对外边产生影响。

html：

.wrapper{ /* 开启BFC */ overflow: hidden; } .div1 { width: 100px; height: 100px; background-color: green; margin-bottom: 10px; } .div2 { width: 100px; height: 100px; background-color: red; margin-top: 20px; }

.left { width: 200px; height: 100px; background-color: green; float: left; } .right { height: 100px; background-color: red; overflow: hidden; /* 创建BFC */ }

.father { width: 200px; border: 5px solid blue; } .left { width: 50px; height: 50px; background-color: green; float: left; } .right { height: 100px; background-color: red; }

.div1 { width: 150px; border: 1px solid red; /*使用BFC来清除浮动*/ overflow: hidden; } .son1, .son2 { width: 100px; height: 100px; background-color: blue; float: left; } .son2 { background-color: greenyellow; }

乐山网站建设