最近对一些基础知识进行了整理,下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。
1. 首先,什么是 BFC 呢?
BFC,Block formatting context,直译为“块级格式化上下文”。
(1)在说 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。并且参与block fomatting context。
② inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box。并且参与inline formatting context。
③ 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) 自适应两栏布局
代码:123456789101112131415body {position: relative;}.aside {width: 300px;height: 200px;float: left;background: #f66;}.main {height: 250px;background: #fcc;overflow: hidden; /* 通过触发main生成BFC, 来实现自适应两栏布局,BFC的区域不会与float box重叠 */}
|
|
(2) 清除内部浮动
代码:
|
|
(3) 防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
代码:
|
|
总结
因为 BFC 内部的元素和外部的元素绝对不会互相影响,因此,当 BFC 外部存在浮动时,它不应该影响 BFC 内部的 Box 的布局,BFC 会通过变窄而不与浮动有所重叠。同理,当 BFC 内部存在浮动时,为了不影响外部元素的布局,BFC 计算高度时会包括浮动的高度,也因此,避免了 margin 重叠的产生。
想看以上例子的网页实现效果,请点这里