C​S​S​定​位​规​则​之​B​F​C

1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS

2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。
在 CSS3 中,BFC 叫做 Flow Root。
2. 形成BFC的条件(符合以下任一条件即可):
1) float的值不为none; 2) overflow的值不为visible;
3) display的值为 table-cell、table-caption和inline-block之一; 4) position的值不为 static或 relative中的任何一个; 3. BFC常见作用
1) 包含浮动元素
BFC会根据子元素的情况自适应高度,这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。
此外网上有资料说使用display:table可以隐式触发table-cell/table-caption,来创建BFC。

阅读 评论 0 阅读全文

发表评论

记录工作生活点滴。

返回
顶部