关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本文预计篇幅较长,认真,耐着性子看,应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。
什么是BFC
BFC概括:可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念,是一块区域,一个环境。
关于BFC的定义:
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。
FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。
常见的FC有BFC、IFC(行级格式化上下文),还有GFC(网格布局格式化上下文)和FFC(自适应格式化上下文),这里就不再展开了。
通俗一点的方式解释:
BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC。
触发BFC的条件?
满足下列条件之一就可触发BFC
- 【1】根元素,即HTML元素
- 【2】float的值不为none
- 【3】overflow的值不为visible
- 【4】display的值为inline-block、table-cell、table-caption
- 【5】position的值为absolute或fixed
那么BFC到底有啥用呢,我们先来看一下
BFC的作用:
- 1.自适应两栏布局
- 2.可以阻止元素被浮动元素覆盖
- 3.可以包含浮动元素——清除内部浮动
- 4.分属于不同的BFC时可以阻止margin重叠
BFC这么有用,那它是怎么实现这些个功能的呢?接下来我们就来看一下BFC的布局规则。
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
布局规则1就是我们平常div一行一行块级放置的样式,大家想一下就知道了,这里就不展开了
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
这里的话如果在同一个BFC中放置两个div,那么根据BFC布局规则1的原则,这两个div是会垂直排列的。这样的话,如果给第一个div(就是上面的div)设置了下边距margin-bottom=200px
,而给第二个div(就是下面的div)设置了上边距margin-top=100px
,那么此时,两个div盒子之间的距离会是多少呢?
答案是200px,这就是因为在同一个BFC的两个相邻Box的margin会发生重叠。那么,这种现象我们也称作外边距合并问题,那么我们该如何处理外边距合并带来的问题呢?
其实,同样利用BFC就能够很好的解决了。
这里用到BFC的作用4:阻止margin重叠
操作方法:给其中一个div外面包一个div,然后通过触发外面这个div的BFC,就可以阻止这两个div的margin重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
1 | <div class="par"> |
给这两个子div加浮动,浮动的结果,如果没有清除浮动的话,父div不会将下面两个div包裹,但还是在父div的范围之内,左浮是子div的左边接触父div的borderbox的左边,右浮是子div接触父div的borderbox右边,除非设置margin来撑开距离,否则一直是这个规则。
那么这里我们就可以利用BFC来清除浮动带来的不良影响
这里用到BFC的作用3:可以包含浮动元素——清除内部浮动
操作方法:给父div加上overflow: hidden
;
原理:触发父div的BFC属性,使下面的子div都处在父div的同一个BFC区域之内,此时已成功清除浮动。
- 同时我们也可以给父div添加同方向的浮动,使两个div都位于同一个浮动的BFC区域之中,来达到清除浮动的目的。【注】但是这种方法不推荐使用。
4.BFC的区域不会与float box重叠。
1 | <div class="aside"></div> |
在这个例子中,弱国我们将main盒子的overflow:hidden
注释掉的话,因为aside盒子带有浮动属性,所以main盒子就会左移到aside盒子下面被覆盖,而如果我们这个时候给main盒子添加了overflow:hidden
,从而触发main盒子的BFC,就不会出现这种情况了。
这就是我们说的BFC的区域不会与float box重叠。
那么在这里我们讲一下BFC的作用1:自适应两栏布局
还是上面的代码,此时BFC的区域不会与float box重叠,因此会根据包含块(父div)的宽度,和aside的宽度,来实现左侧定宽,右列自适应的布局效果。