什么是BFC?对bfc的简单理解
2018-03-19 20:20
609 查看
在讲BFC之前,先来看看一个例子
可以看到,块级元素的排列顺序是从上往下,即使所在行的宽度可以容纳多个元素,现在同时给p1与p2添加外边距
本来p1的下边距为50px,p2的上边距为50px,按道理他们之间的距离应为100px才对,可是这里却只有50px了,这是因为在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的,也就是在CSS学习笔记07 盒子模型中介绍过的外边距合并,那如何解决这种外边距合并的现象呢,这个就涉及下面要介绍的BFC了。
同一个BFC中,在两个相邻的块级元素中,垂直margin会发生折叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
计算BFC的高度时,浮动元素也参与计算
float属性不为none(如:left | right)
overflow的值不为visible(如:hidden | auto | scroll)
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
position为absolute或fixed
现在给p1设置display:inline-block属性
此时由于p1元素通过display:inline-block触发了BFC,此时的p1就是一个独立的BFC了,根据规则
所以这时候就不会发生margin重叠了。清除内部浮动
当一个标准流中的盒子中所有的子元素都进行了浮动,并且没有给盒子设置高度时,那么这个盒子的整个高度就会塌陷,什么意思呢,看下面的例子
父容器的被两个子p撑起来了,现在给child添加浮动
这个时候,父容器变成了2条重合的线了,也就是高度变为0了,即所说的高度塌陷。根据规则
这时候可以触发parent生成BFC,那么parent在计算高度时,parent内部的浮动元素child也会参与计算
根据规则
所以即使left设置了左浮动,right的的左边依然会与包含块的左边(即body)相接触。接着我们可以根据规则
让right触发产生BFC,这样right就不会与left重叠了
这样就形成了常见的两列布局。总之记住一点BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,同样的,外面的元素也不会影响到容器里面的子元素。
可以看到,块级元素的排列顺序是从上往下,即使所在行的宽度可以容纳多个元素,现在同时给p1与p2添加外边距
本来p1的下边距为50px,p2的上边距为50px,按道理他们之间的距离应为100px才对,可是这里却只有50px了,这是因为在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的,也就是在CSS学习笔记07 盒子模型中介绍过的外边距合并,那如何解决这种外边距合并的现象呢,这个就涉及下面要介绍的BFC了。
什么是BFC
Block Formatting Contexts 即块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box(display 属性为 block, list-item, table 的元素)如何布局,并且与这个区域外部毫不相干。其中 Formatting Context 是一个决定如何渲染文档的容器,Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。通俗点说,BFC就是一个独立的盒子,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。在文档呈现开始的时候,会自动创建一个BFC来对整个页面进行布局,在没有创建一个新的BFC的时候,整个文档就这一个BFC。BFC的规则
内部的box会在垂直方向,从顶部开始一个接着一个地放置(上面的例子可以看出)同一个BFC中,在两个相邻的块级元素中,垂直margin会发生折叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
计算BFC的高度时,浮动元素也参与计算
触发BFC
根元素float属性不为none(如:left | right)
overflow的值不为visible(如:hidden | auto | scroll)
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
position为absolute或fixed
应用BFC
解决margin叠加问题
还是上面的那个例子,因为此时页面的元素的在一个标准流中,所以这个时候body元素就是一个BFC,根据规则此时由于p1元素通过display:inline-block触发了BFC,此时的p1就是一个独立的BFC了,根据规则
清除内部浮动
112fd
当一个标准流中的盒子中所有的子元素都进行了浮动,并且没有给盒子设置高度时,那么这个盒子的整个高度就会塌陷,什么意思呢,看下面的例子父容器的被两个子p撑起来了,现在给child添加浮动
这个时候,父容器变成了2条重合的线了,也就是高度变为0了,即所说的高度塌陷。根据规则
布局
根据规则
这样就形成了常见的两列布局。总之记住一点BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,同样的,外面的元素也不会影响到容器里面的子元素。
相关文章推荐
- 信号量是什么?可以这样简单的理解
- 简单理解什么是MapReduce!
- 什么是泛型?简单记录一下自己理解的泛型。
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
- CSS学习笔记09 简单理解BFC
- 简单方法:让你理解什么是依赖注入Dagger2(Dependency Injection简称DI)
- 通过简单示例来理解什么是机器学习
- [tensorflow应用之路]什么是深度神经网络——通过实现简单的神经网络理解DNN
- 简单理解Hadoop(Hadoop是什么、如何工作)
- 通过简单示例来理解什么是机器学习
- 句柄(Handle)是什么--对句柄的简单理解。
- JIT是什么,我的简单理解
- 简单Java代码实例助你通俗易懂的理解什么是装饰(者)设计模式 (Decorator)
- 简单理解C#中的抽象工厂模式是什么概念!
- 简单理解一下什么是脚本语言
- 关于什么是BI的简单理解
- 简单理解IOC和AOP的原理
- BFC规范的理解
- 什么是渐进式框架?React虚拟Dom理解?
- CODEFORCES 272C Dima and Staircase <细节理解题+简单技巧>