BFC (Block Formatting Context)
BFC,块级格式化上下文,规定了内部的块级元素的布局方式。默认情况下只有根元素(即body)一个块级上下文。
- BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响。
- 通过一些条件触发BFC,可以满足布局需求或解决问题。
- 将BFC看作一个工具,无需探究定义,重点理解功能(特性)。
1.1 BFC布局规则
- 内部的块级元素在垂直方向上一个接一个地放置。
- 块级元素垂直方向的距离由margin决定;属于同一个BFC的两个相邻块级元素的margins会合并。
- 每个元素的margin box的左边,与包含border box的左边相接触。
- BFC的区域不会与float box重叠。
- BFC是一个隔离的独立容器,子元素不会影响外部的元素,反之亦然。
- 浮动元素也会被计算在BFC的高度内。
1.2 创建一个BFC
一个BFC可以通过以下方法被触发:
float
的值不为none
。overflow
的值不为visible
。position
的值为fixed
或absolute
。display
的值为table-cell
,table-caption
,inline-block
,flex
, 或inline-flex
。
特性
- 同一个BFC的两个相邻容器的上下margins会合并。
- 浮动元素也会被计算在BFC的高度内。
- BFC的区域不会与浮动元素重叠。
- BFC内的元素在垂直方向上会一个接一个地放置。
- BFC是一个隔离的独立容器。
1.3 BFC的应用
1.3.1 外边距折叠
垂直方向上的外边距会合并。
.container {
overflow:hidden;
width:100px;
height:100px;
background:red;
}
.box1 {
height:20px;
margin:10px 0;
background:green;
}
.box2 {
height:20px;
margin:20px 0;
background:blue;
}
.box3 {
overflow:hidden;
}
1.3.2 计算BFC高度时浮动元素也参与计算
BFC可以解决高度塌陷问题。
css
.outside {
border: 10px solid blue;
overflow: hidden;
}
.inside {
float: left;
width: 200px;
height: 200px;
background: yellowgreen;
}
1.3.3 阻止元素被浮动元素覆盖
css
.left {
float: left;
width: 100px;
height: 200px;
background: yellowgreen;
}
.right {
height: 300px;
background: blue;
overflow:hidden;
}
1.3.4 在垂直方向上依次排列
css
.outside {
border: 10px solid blue;
}
.inside {
width: 200px;
height: 200px;
background: yellowgreen;
}
1.3.5 防止文字环绕
浮动的盒子会遮挡下面的盒子,但文字会环绕浮动的盒子。
css
.left {
float: left;
width: 100px;
height: 100px;
background: yellowgreen;
}
p {
background: red;
overflow: hidden;
}