BFC(块级格式化上下文)
上一篇文章写了很长时间,是关于css布局的。既然涉及到了布局,BFC当然是不能错过的,所以在这篇文章中说明。BFC全称”Block Formatting Context”,中文为“块级格式化上下文”。 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC),CSS3中还增加了GFC和FFC。 我们都知道,一个页面是由多个box组成的,而元素的类型或是display类型决定了这个box是何种类型的,当然也决定了它是如何被渲染的。block-level box(块级元素)参与BFC布局,inline-level box(行内元素)参与IFC布局。 BFC是一个独立的渲染区域,只有block-level box参与,他自己规定内部的block-level box如何排列,并且不会影响外部的元素,当然,外部的元素也不会影响BFC中的元素。 BFC的布局规则
哪些属性会触发生成BFC
BFC的应用1.布局 *{padding:0px;margin:0px} .left{float:left;width:200px;height:200px;background-color:#ccc} .right{height:300px;background-color:olive} <div class="left"></div> <div class="right"></div> 以上代码的效果图,结果大家都能猜的到。 但是给right加上一个overflow:hidden后,哈哈就可以实现简单的两列布局了。当然这是利用了BFC区域不会与float元素重合的特点。 2.垂直方向maring塌陷 html{background-color:red;} .left{height:100px;width:100%;margin-bottom:100px;background-color:#ccc;float:left;} .right{height:100px;margin-top:100px;background-color:olive;} <div class="left"></div> <div class="right"></div> 此时,第一个div虽然有100px的下外边距,第二个div有100px的上外边距,但是实际上两元素之间的距离只有100px(红色的body背景),发生了margin的塌陷。 为了处理塌陷,可以让两个div处于不同的BFC中,所以,塌陷消失了。 *{padding:0px;margin:0px} html{background-color:red;} .left{height:100px;margin-bottom:100px;background-color:#ccc;overflow:hidden;} .right{height:100px;margin-top:100px;background-color:olive;overflow:hidden;} .cont{overflow:hidden;} <div class="left"></div> <div class="cont"> <div class="right"></div> </div> 3.清楚浮动,让浮动元素撑起父元素的高度 *{padding:0px;margin:0px} .box{background-color:#ccc;} .left{float:left;width:200px;height:100px;background-color:#abc;} <div class="box"> <div class="left"></div> </div> 这种情况下,浮动元素无法撑起父元素的高度,给他设置背景也就相当于没有设置,当给父元素设置overflow:hidden后,情况就变了(clear:both也是可以达到这效果的),他就可以包含自己的浮动子元素了。 其实BFC就是个独立的盒子,外部不影响内部,内部不影响外部。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |