什么是BFC，他有什么用？

1、什么是BFC

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

那具体是啥意思呢

假设box1和box5是两个BFC区域，那么根据上述原理能理解到的就是，box1这个BFC区域包含了子元素box2，box3，box4，box5。但不包括box678。而box5这块BFC区域则包含了box678这三个子元素。

总结:
1,每一个BFC区域只包括其子元素，不包括其子元素的子元素。
2,每一个BFC区域都是独立隔绝的,互不影响
第一条就是字面意思，第二条直接看代码理解

在理解第二条之前首先我们要知道。怎样使一个元素变成BFC区域
大概有以下几种办法：
·body根元素

·设置浮动，不包括none
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell

·弹性布局，flex
那知道了怎么让元素变成BFC区域后，这个BFC到底有什么作用呢？

根据上面的描述，BFC区域有一个特点，那就是独立。不会影响外部元素。根绝这个特性就能解决很多布局问题。
1，解决外边距的塌陷问题(垂直塌陷)

开发中，前端的布局手段，离不开外边距margin，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。

看上面的例子，两个盒子都有100的外边距，但是实际上两个盒子的距离却只有100px，按理来说应该是200才对，这就是margin垂直塌陷。那要解决这个问题只需要给这两个盒子都加一个父元素，并且将这个父元素设置成BFC区域，就可以解决这个margin塌陷的问题。

2，利用BFC解决包含塌陷

有时候我们给子元素加margin可能会带着父元素一起跑

很显然，我们只是想要子元素距离父元素50px，而不是整个父元素都一起跑。这个时候用padding可以解决问题，但是用BFC同样可以解决

只需要将父元素变为BFC区域，就能得到解决

因为将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部

3.清除浮动。

大家都知道，浮动会导致父元素高度塌陷，那大家还记得怎么清除浮动吗？相信很多人都知道：overflow：hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow：hidden可以清除浮动。现在知道了，BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。这里就不上例子了

4.BFC可以阻止标准流元素被浮动元素覆盖

大家都知道，浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

那么这个时候我们只需要让蓝色区域触发BFC，就可以做到不受浮动元素影响

而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应。怎么样，是不是很神奇。

最后总结一下：

一个BFC区域只包含其子元素，不包括其子元素的子元素。
并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

什么是BFC，他有什么用？相关推荐

如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例
1.BFC 是什么? Block Formatting Contexts 块级格式化上下文.(不懂? 没关系,后文有介绍.) 2.为什么需要BFC? 在传统布局中出现的问题需要一种统一的解决方案. 首 ...
BFC与垂直外边距折叠笔记
BFC与垂直外边距折叠 BFC BFC是什么(Block formatting contexts) Boxes in the normal flow belong to a formatting co ...
BFC(Box Formatting Context)的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...
关于Block Formatting Context－－BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
元素，布局方式，BFC和清除浮动
元素:块级元素,内联元素,内联块状元素块级元素:在默认情况下会独占一块区域相对于块级元素的父元素来讲,块级元素占据的行默认是单独享有的. ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
CSS中的BFC机制
1 什么是BFC 块格式化上下文BFC(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 ...
一天搞定CSS：BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用关键词解释: 块级元素:父级( ...

什么是BFC，他有什么用？

1、什么是BFC

什么是BFC，他有什么用？相关推荐

最新文章

热门文章