1.背景介绍
BFC全称是Block fomatting context,直译为”块级格式化上下文”。我们来拆分理解一 下,首先了解Block;Box是盒子模型,是CSS布局中的基本单位,BOX有几种类型我们大概了解一下;
- 块盒block box: block box块盒有以下特性:
- 当元素的CSS属性display为block,list-item或 table时,它是块级元素 block-level;
- 视觉上呈现为块,竖直排列;
- 块级盒参与块格式化上下文;
- 行内盒inline box:
- 当元素的CSS属性display为inline,inline-block或inline-table时,称它为行内级元素;
- 视觉上它将内容与其它行内级元素排列为多行;典型的如段落内容,有文本(可以有多种格式譬如着重),或图片, 都是行内级元素;
- 行内级元素生成行内级盒(inline-level boxes),参与行内格式化上下文(inline formatting context)。 同时参与生成行内格式化上下文的行内级盒称为行内盒(inline boxes)。所有display:inline的非替换元素生成的 盒是行内盒;
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。CSS2.1 中只有BFC、IFC(行级格式化上下文),CSS3中还增加了GFC(网格布局格式化上下文)和FFC(自适应格式化上下文)。
2.知识剖析
BFC定义:
BFC是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并 且与这个区域外部毫不相干。BFC可以被理解为一种容器,一种被隔离起来了的独立容器,容器里面的元素不会在布局上 影响到外面的元素,并且 BFC具有普通容器没有的一些特性,例如可以包含浮动元素等等;
BFC的布局规则:
- 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个常规流);
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时,浮动子元素也参与计算
- 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。
- 垂直方向上的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。
- BFC是一个隔离的独立容器,容器里面的子元素不会影响到外面元素
- 上面罗列的一条条特性可能有点抽象,但是我们可以结合之前学习CSS中的特性对它们来加以理解;比如:CSS中块级 元素会垂直排列;浮动元素会尽量接近往左或右上方;竖直方向的两个元素的margin会重叠、 等等。
3.常见问题
BFC在什么情况下会发生,或者说BFC有什么触发条件?
BFC有什么实际的作用?
4.解决方案
1.BFC有什么触发条件?
-
在CSS2.1中规定,满足下列CSS声明之一的元素便会生成BFC
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
2.BFC有什么实际的作用?
-
实际用途
- 防止margin重叠(塌陷)
- 可以包含浮动元素——清除内部浮动
- 防止与浮动元素重叠——自适应两栏布局
5.编码实战
6.扩展思考
haslayout
谈到BFC就有很多人引申到haslayout,那么haslayout又是什么呢,它和BFC有什么关系,或者说有什么共同点呢?
haslayout是IE7-浏览器的特有属性。Layout是IE浏览器渲染引擎的一个内部组成部分。渲染引擎采用了’hasLayout’属 性,属性值可以为true或者flase,当一个元素的hasLayout为true时,我们就说这个元素有一个布局(Layout),或者 拥有布局,这个时候就不用依赖其包含块了而是靠自身内容。
- 默认触发hasLayout的HTML标签:
- 根元素
- html,body
- table,tr,th,td
- img
- input,button,select,textarea,fieldset
- 可以触发hasLayout的CSS属性:
- display:inline-block
- height/width:除了auto
- float:left/right
- position:absolute
- zoom(IE专有属性,设置或检索对象的缩放比例):除了normal
与BFC的共同点
1.可以实现不和浮动元素重叠
2.可以清除元素内部浮动
3.能解决嵌套元素边距折叠的问题
7.参考文献
参考资料:http://www.cnblogs.com/elcarim5efil/p/4745796.html
——学习块格式化上下文(BlockFormattingContext)
参考资料:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
——前端精选文摘:BFC 神奇背后的原理
参考资料:http://www.cnblogs.com/ILYljhl/p/3169419.html
——BFC与hasLayout之间的故事
8.更多讨论
由BFC引发的关于position的思考?
BFC 与 hasLayout 的比较?
9.互动提问
1.使用overflow触发BFC有什么好处?
答:overflow相比于position,display,float等的好处就是不会破坏其原有的结构,不会影响其原有的布局而且代码简洁使用起来非常方便。
2.同一个 BFC 的下上下外边距还是会发生重叠,应该怎么办?
答:想要避免外边距的重叠,可以将它们放在不同的 BFC 容器中。
3.BFC与hasLayout有什么共同点?
答:1.最主要的就是hasLayout只能被IE所触发,是IE专有的属性2.hasLayout的元素被限制为一个矩形;3.hasLayout的元素设置display:inline后与inline-block行为类似。