css Block formatting context BFC
w3c关于BFC解释:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Mdn描述:
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
A block formatting context is created by one of the following:
- the root element or something that contains it
- floats (elements where
float
is notnone
) - absolutely positioned elements (elements where
position
isabsolute
orfixed
) - inline-blocks (elements with
display
: inline-block
) - table cells (elements with
display
: table-cell
, which is the default for HTML table cells) - table captions (elements with
display
: table-caption
, which is the default for HTML table captions) - elements where
overflow
has a value other thanvisible
- flex boxes (elements with
display
: flex
orinline-flex
)
从上可以看到,display设置为inline-block,table-cell,table-caption,flex,inline-flex可以建立一个BFC。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
Block formatting contexts are important for the positioning (see float
) and clearing (see clear
) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.
--------------------------------
首先根元素可以产生独立的BFC,然后是设置float的元素(除float值为none),position定位元素只满足两个absolute和fixed,所以relative和static都不行(要注意IE下position为relative是可以触发haslayout的)。此外设置了display:inline-block的元素可以,设置了display:table-cell的元素。设置了display:table-caption。设置了overflow,除值为visible的情况(auto,hidden,scroll都可以)。
那BFC究竟干嘛用的:
一般情况下,两个上下相邻的盒子会折叠它们垂直方向的外边距,但这种情况只发生在同一个Block Formatting Context中。换句话说,在同一个布局环境中(Block Formatting Context)是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因(因为它们设置了浮动,设置了定位,所以它们形成了独立的BFC,所以边距折叠的情况就不会发生),同一个BFC环境很重要,因为如果是不同的BFC,很多我们固有意识中的现象不会再发生。
以下是一篇到底bfc是否可以阻止折叠margin的争论:
http://www.zhihu.com/question/19823139
BFC:Block Formatting Context.
BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述:
一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block boxes 排布以及 float 元素相互作用的区域。
可以理解为一个作用范围,在一个BFC里的布局与其之外的布局不相关或者说不相互影响。有一个形象的例子可作参考:
把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆,都是把 货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。
如何创建BFC
当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
- float的值不为”none”
- overflow的值不为”visible”
- display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
- position的值不为 “static” 或 “relative”中的任何一个
我是一个使用浮动布局的孩子来的。今天才知道了这种原来也有可以不用清除浮动来布局,只要对BFC这个概念清晰明了,完全可以不用清除浮动来布局了。
以前的误解
1.折叠margin
以前总是认为,相邻两个盒子放在一起,他们的margin会重叠,取值为最大的一个作为他们之间的margin值
下面我在一篇文章里面彻底了解了折叠margin产生的原因了。
这些margin都处于普通流中,并在同一个BFC中;
这些margin没有被非空内容、padding、border 或 clear 分隔开;
这些margin在垂直方向上是毗邻的,包括以下几种情况:
1、一个box的top margin与第一个子box的top margin
2、一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height为auto的情况下
3、一个box的bottom margin与紧接着的下一个box的top margin
4、一个box的top margin与其自身的bottom margin,但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box
垂直方向上毗邻的box不会发生折叠的情况:
根元素的外边距不会参与折叠
一个有clearance的box的上下margin毗邻,它会与紧接着的下一个box发生margin折叠,但折叠后的margin不会再与它们父box的bottom margin折叠
折叠边距的计算
当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。
如何解决再float的情况下两个盒子折叠在一起呢?方法当然是建立一个bfc
<div style="background:#eee;border:1px solid red;overflow:hidden;">
<div id="A" style="background:#aaa;overflow:auto;margin-top:20px;">
<div id="B" style="background:white;border:1px solid green;margin-top:10px;">
B:给A加了overflow:auto之后,我有10px的margin-top了
</div>
</div>
</div>
2.BFC可以包裹浮动元素实例解析
继续BFC的话题的讨论,本文讨论一个简单的例子:如何制作两行两列的网页布局,解决浮动布局不换行的问题。
制作两行两列的布局方法很多,浮动布局、表格布局和基于display:inline-block的列表布局。这个重点讨论浮动布局,因为我们这里要解决浮动布局里的一个问题:元素浮动不换行怎么办?其他布局先做简单叙述,作为拓展将在以后的博文里仔细论述。
用浮动布局实现
考虑一下下面的例子,目标是显示成两行两列:
<div id="A">
<div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
<div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
</div>
<div id="B">
<div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
<div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
</div>
我们可以看到四个盒子最终都处在一列里面。
但我们的本意是让他们处在同一个盒子,并分成两列的。
有什么方法呢?
在其中一个外层盒子建立一个BFC了。
<div id="A" style="display:inline-block;">
<div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
<div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
</div>
<div id="B">
<div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
<div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
</div>
3.左边的浮动,右边的盒子被左边的遮住了

<div class="item">
<div class="img"></div>
<div class="content"></div>
</div> .img{
float:left;
width:100px;
height:100px;
background-color:#ccc; }
.content{
background-color:green;
width:500px;
height:300px;
overflow:auto;
}
)
4.层内浮动溢出的探讨
<div id="content">
<div id="content-inner">
<ul class="content-banner clearfix">
<li class="item" style="float:left">向左浮动元素</li>
<li class="item" style="float:left">向左浮动元素</li>
<li class="item" style="float:left">向左浮动元素</li>
</ul>
</div>
</div>
参考资料:
CSS 101: Block Formatting Contexts(BFC)(原文已挂掉,这里是转载的)
Block-level boxes、containing block、block formatting context 三者之间的区别和联系
更多:
看以前的:http://www.cnblogs.com/youxin/archive/2012/08/21/2649350.html
http://www.w3ctech.com/p/1101
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
http://zenxds.info/bfc-%E5%9D%97%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87/
css Block formatting context BFC的更多相关文章
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- 【转】关于Block Formatting Context--BFC和IE的hasLayout
转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...
- 关于Block Formatting Context--BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- 什么是BFC(Block Formatting Context)
原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...
- BFC (Block formatting context)
一:BFC 是什么 MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...
- 关于Block Formatting Context--BFC和IE的hasLayout(转)
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. ...
- 块格式化上下文(Block Formatting Context,BFC)
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...
- BFC --- Block Formatting Context --- 块级格式化上下文
虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
随机推荐
- mysql 存在该记录则更新,不存在则插入记录的sql
转 http://www.cnblogs.com/zeroone/articles/2298929.html , ‘yourname') ON DUPLICATE KEY UPDATE auto_na ...
- 关于css3的边框的border-radius和border-image用法的详解
一.圆角边框:IE9.0以前版本不支持 border-radius: 接受8个属性,前四个为x轴,后四个为y轴,以斜杠划分x轴.y轴,即border-radius:左上较 右上角 右下角 左下 ...
- 关于Eclipse的编码配置和字体大小设置
编码设置 1.工作空间编码:Window-->Preferences-->General-->Workspace 2.工程文件编码:项目-->Properties-->R ...
- Android02-Activity01
1.概念:活动是一种可以包含用户界面的组件, 主要用于和用户进行交互. 2.常见操作: 1.隐藏Activity的标题栏: @Override protected void onCreate ...
- Log4J使用笔记(转)
转自:http://www.cnblogs.com/eflylab/archive/2007/01/11/618001.html Log4J是Apache的一个开放源代码的项目.通过使用Log4J,程 ...
- Delphi 实现无窗口移动(发WM_NCHITTEST消息计算,然后再发WM_SYSCOMMAND消息,带参数SC_DRAGMOVE)
procedure imgListMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer) ...
- 很详细、很移动的Linux makefile教程:介绍,总述,书写规则,书写命令,使用变量,使用条件推断,使用函数,Make 的运行,隐含规则 使用make更新函数库文件 后序
很详细.很移动的Linux makefile 教程 内容如下: Makefile 介绍 Makefile 总述 书写规则 书写命令 使用变量 使用条件推断 使用函数 make 的运行 隐含规则 使用m ...
- 探究android控件及布局
控件(widget) 1. TextView(该控件的一些需要注意的属性,下同) gravity="center"textSize="24sp"textColo ...
- 我使用过的Linux命令之date - 显示、修改系统日期时间
原文地址:http://www.cnblogs.com/diyunpeng/archive/2011/11/20/2256538.html 用途说明 ate命令可以用来显示和修改系统日期时间,注意不是 ...
- 支付宝“订单交易失败 ALI64” 报错的原因
移动快捷支付,往往需要集成支付宝的sdk,集成的过程相对简单,只要按照支付宝的文档,进行操作一般不会出问题. 下面主要说明一下,集成sdk后报 "订单交易失败 请稍后再试(ALI64)&qu ...