在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。
BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域,或者说是在一定条件下的一种渲染规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。
IFC行内格式化上下文, 在行内格式化上下文中,框(box)一个接一个的水平排列,起点是包含块的顶部。水平方向上的 margin、border和padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。
BFC规定了内部的Block Box如何布局。
定位方案:
1. 内部的Box会在垂直方向上一个接一个放置。
2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box 的左边,与包含块border box的左边相接触。
4. BFC的区域不会与float box重叠。
5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时,浮动元素也会参与计算。
满足下列条件之一就可触发BFC
1. 根元素,即html
2. float的值不为none(默认)
3. overflow的值不为visible(默认)
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed
BFC的用处
1、清除浮动
如果子元素都是浮动的,受浮动影响,父元素的高度会塌陷。
解决方案:为父元素加上overflow:hidden;使其形成BFC,根据BFC规则第六条,计算高度时就会计算float的元素的高度,达到清除浮动影响的效果。
2、布局:自适应两栏布局
如果不想要文字环绕图片的布局效果,而是想要图片文字各占两列,那么只需触发文字容器的BFC,根据规则第4、5条,BFC的区域是独立的,不会与页面其他元素相互影响,且不会与float元素重叠,因此就可以形成两列自适应布局。
3、防止垂直margin合并
我们知道,如果上下两个相邻元素都有margin,那么上面元素的margin-bottom和下面元素的margin-top会合并,只取两者中的最大值作为中间的距离,而不是相加。
解决方法:为其中一个元素的外面包裹一层元素,并为这个外层元素设置overflow:hidden;使其形成BFC。
根据BFC规则第五条,BFC内部是一个独立的容器,所以不会与外部相互影响,可以防止margin合并。