最近对一些基础知识进行了整理,下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。
1. 首先,什么是 BFC 呢?
BFC,Block formatting context,直译为“块级格式化上下文”。
在说 BFC 之前,我们首先要弄懂什么是 formatting context?
fomating context:格式化上下文,是W3C CSS2.1规范中的一个概念,拥有一套渲染规则。对内来约束其内块级元素的布局,对外来控制和外部元素的布局。通俗一点的讲,它就是页面中的一块渲染区域,规定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context (简称 IFC )。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC(GridLayout Formatting Contexts,直译为"网格布局格式化上下文")和FFC(Flex Formatting Contexts,直译为"自适应格式化上下文")。IFC、GFC、FFC 在这里就不进行详细解释了。
既然有四种渲染规则,那么我们就需要知道在什么情况下会采用哪种渲染规则,box 作为 css 布局的对象和基本单位,它的类型,由其元素的类型和 display 属性决定。不同类型的 box,会参与不同的 fomating context(一个决定如何渲染文档的容器),以不同的方式渲染。那么,都有哪些类型的盒子呢?
① block-level box : display属性为block, list-item, table的元素,会生成block-level box,参与BFC。
② inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box,参与IFC。
③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。(CSS3)
block:块级元素,默认不加修饰的情况下块级元素并不会被收缩包裹其内容,其宽会充斥父元素,高度由自身内容撑开(inline 行内元素会“收缩包裹” 其内容,并且会尽可能包紧)。每个块级元素即使设置了宽度,不占满父元素也会自己占据一行,不让其后元素与自己并行。
说了这么多,我们回到正题:
BFC 就是一个独立的渲染区域,规定了Block-level内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
通俗一点的讲, BFC 就是相当于一个把浮动元素框起来并隔离的容器,容器里面的子容器不会影响到外面的元素,使浮动不会溢出。
2. BFC 布局规则
- 内部的 box 会在垂直方向,一个接一个的放置。
- 每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动,也是如此。
- BFC 的区域不会与float box 重叠。
- BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此。
- 计算 BFC 的高度时,浮动元素也参与计算
3. 哪些元素会生成 BFC ?
- 根元素
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
- position 的值为 absolute、fixed
4. BFC 的作用及原理
(1) 自适应两栏布局
代码:
body {
position: relative;
}
.aside {
width: 300px;
height: 200px;
float: left;
background: #f66;
}
.main {
height: 250px;
background: #fcc;
overflow: hidden; /* 通过触发main生成BFC, 来实现自适应两栏布局,BFC的区域不会与float box重叠 */
}
<div class="aside"></div>
<div class="main"></div>
(2) 清除内部浮动
代码:
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden; /* 触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算 */
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
(3) 防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
代码:
/* 若没有 .wrap ,会发生 margin 重叠,两个p上下之间的距离为30px */
/* 在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。 */
.wrap {
overflow: hidden; /* 防止垂直margin重叠 */
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
总结
因为 BFC 内部的元素和外部的元素绝对不会互相影响,因此,当 BFC 外部存在浮动时,它不应该影响 BFC 内部的 Box 的布局,BFC 会通过变窄而不与浮动有所重叠。同理,当 BFC 内部存在浮动时,为了不影响外部元素的布局,BFC 计算高度时会包括浮动的高度,也因此,避免了 margin 重叠的产生。
想看以上例子的网页实现效果,请点这里