一、BFC是什么?
在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
-
- 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: css3 中才有, 这儿先不讲了。
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC
和 IFC
, CSS3 中还增加了 GFC
和 FFC。
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
二、哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
三、BFC的作用及原理
1. 自适应两栏布局
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style> body { 300px; position: relative; } .aside { 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class = "aside" ></div> <div class = "main" ></div> </body> |
页面:
根据BFC
布局规则第3条:
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
根据BFC
布局规则第四条:
BFC
的区域不会与float box
重叠。
我们可以通过通过触发main生成BFC
, 来实现自适应两栏布局。
1
2
3
|
.main { overflow: hidden; } |
当触发main生成BFC
后,这个新的BFC
不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下:
2. 清除内部浮动
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<style> .par { border: 5px solid #fcc; 300px; } .child { border: 5px solid #f66; 100px; height: 100px; float: left; } </style> <body> <div class = "par" > <div class = "child" ></div> <div class = "child" ></div> </div> </body> |
页面:
根据BFC
布局规则第六条:
计算
BFC
的高度时,浮动元素也参与计算
为达到清除内部浮动,我们可以触发par生成BFC
,那么par在计算高度时,par内部的浮动元素child也会参与计算。
代码:
1
2
3
|
.par { overflow : hidden ; } |
效果如下:

3. 防止垂直 margin 重叠
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<style> p { color : #f55 ; background : #fcc ; width : 200px ; line-height : 100px ; text-align : center ; margin : 100px ; } </style> <body> <p>Haha</p> <p>Hehe</p> </body> |
页面:
两个p之间的距离为100px,发送了margin重叠。
根据BFC布局规则第二条:
Box
垂直方向的距离由margin决定。属于同一个BFC
的两个相邻Box
的margin会发生重叠
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC
。那么两个P便不属于同一个BFC
,就不会发生margin重叠了。
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <div class = "wrap" > <p>Hehe</p> </div> </body> |
效果如下:
总结
其实以上的几个例子都体现了BFC
布局规则第五条:
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC
内部的元素和外部的元素绝对不会互相影响,因此, 当BFC
外部存在浮动时,它不应该影响BFC
内部Box的布局,BFC
会通过变窄,而不与浮动有重叠。同样的,当BFC
内部有浮动时,为了不影响外部元素的布局,BFC
计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
原文来自:前端文摘:BFC 神奇背后的原理 via Melon Space
博客界面终于变成了自己比较满意的感觉
梯度下降法
WPF小试牛刀
关于BOF改进方法的一些introduction
POJ——1012
这是个伟大的暑假
上午的四个coding问题
FindFirst,FindNext,FindClose学习
TThread类初探
- 最新文章
-
iPhone和iPad下各种常见控件的宽度
loadview viewdidload viewdidunload 小结
XCode的一些调试技巧
完美实现自定义软键盘(Deprecated)
统计含中英文混编的NSString 字符串长度
转载:C#实现快捷键(系统热键)响应 以及事件调用
转载:Configuring Kiosk Mode on Your Windows XP Computer
201720182 20179306《网络攻防技术》第四周作业
【原】 POJ 1159 Palindrome 回文 动态规划 解题报告
【原】 POJ 1088 滑雪 递归+memoization 解题报告
- 热门文章
-
【原】 POJ 1141 Brackets Sequence 动态规划 解题报告
【原】 POJ 1062 昂贵的聘礼 Dijkstra 解题报告
【原】 POJ 1056 IMMEDIATE DECODABILITY Trie树查找前缀 解题报告
【原】 POJ 1094 Sorting It All Out 拓扑排序 解题报告
【原】 POJ 1050 To the Max 求二维矩阵的最大子矩阵 解题报告
【原】 POJ 1083 Moving Tables 解题报告
【原】 POJ 1157 LITTLE SHOP OF FLOWERS 动态规划 解题报告
【原】 POJ 1007 DNA Sorting 逆序数 解题报告
【2011年秋】华为面经
[转]感知器(Perceptron)原理和应用