目前BFC已经是一个耳熟能详的词了,可是当别人问我BFC的一些相关东西时候,我还不能很有底气地去解释BFC的相关问题,所以这两天又详细阅读了一些相关资料,来与大家一起探讨一下BFC。
在说明BFC之前,我们先来了解一下Formatting context这个概念,它指的是页面中的一块渲染区域,并且有一套渲染规则,决定子元素如何定位,以及与其它元素间的关系和相互作用。比较常见的Formatting context就是Block Formatting context(BFC)和Inline Formatting context(IFC).CSS3还引入了GFC和FFC。
BFC译为“块格式化上下文”。它是一个独立的渲染区域,规定了内部的Block-level Box如何布局,且与区域外部没有关系。从样式上看,具有BFC元素与其它元素没有什么区别,但是功能上来说,BFC相当于一个隔离了的容器,容器里的元素在布局上不会影响外部元素,反之亦然。
BFC布局规则:
1、内部Box会在垂直方向上一个接一个地放置
2、属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box左边,与包含块的border box左边相邻(从左到右的布局)
4、BFC就是页面上一个独立的容器,里边元素不会影响外边,反之亦然
5、计算BFC元素高度时,浮动元素也参与其中
如何触发BFC?
满足以下任一条件的元素,会触发BFC:
根元素
浮动元素,float除none以外
定位元素,position为absolute或者fixed
display为以下值的:inline-block、table-cell、table-caption、flex、inline-flex
overflow除了visible以外的值(hidden、scroll、auto)
要注意的是BFC并不是元素,是元素所带有的一些属性,所以是以上这些元素产生了BFC,而并不是它们是BFC。
BFC作用及原理
根据BFC布局规则,可以解决一些常见问题:
1、清除浮动:其实也就是使用overflow:hidden和overflow:auto清除浮动的原理,使用overflow出发了浮动元素的父级元素的BFC,根据BFC布局规则5,知道BFC元素高度含内部浮动元素高度,解决了高度塌陷问题。代码示例:
<div class="par1"><div class="bfc-child"></div></div>
<div class="par2"><div class="no-child"></div></div>
style:.
par1{
overflow: hidden;
}
.par1,.par2{
border: 1px solid #ccc;
margin: 10px;
}
.bfc-child,.no-child{
float: left;
height:20px;
width: 100px;
}
效果图展示:
2、防止垂直margin重叠
根据BFC布局规则2,同属于一个BFC的两个相邻box的margin会产生重叠,以下为主要代码及效果图展示:
<div class="one"></div>
<div class="two"></div>
.one,.two{border: 1px solid red;width: 198px;height: 10px;}
.one{margin-bottom: 10px;}
.two{margin-top: 10px;}
效果图中,两个margin之间距离为10px,产生了margin重叠
解决margin重叠就是使div.one和div.two不在同一个BFC中,给div加上一个BFC父元素。
代码:
<div class="bfc-par">
<div class="one"></div>
</div>
<div class="two"></div>
.bfc-par{
overflow:hidden;
}
效果图(两个div间距20px,解决了margin重叠问题):