浅谈对BFC的理解
对于前端开发人员来说肯定是知道盒模型(margin,border, padding, content)这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。
1. FC的概念。
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
2. 什么是BFC
2.1 概念
块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
注意: BFC 是W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为float root。
2.2 BFC的生成
- 浮动元素(float: left | right)
- 绝对定位元素(position: absolute | fixed)
- overflow的值不为visible
- 行内块元素(display:inline-block)
- 表格单元格(display:table-cells,td, th)
- 表格的标题(display:table-captions)
- 注意:
- disable:table之所以也可以是因为table默认会生成一个匿名的table-cell。正是因为匿名的table-cell生成了BFC
- 是这些元素创建了BFC,他们本身不是BFC
2.3 BFC的约束规则
- 浏览器对于BFC这块区域的约束规则如下:
- 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠(即margin重叠)。
- 生成BFC元素的子元素中,每一个子元素做外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)
- 网友解析
- 内部的Box会在垂直方向上一个接一个的放置
-
垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)
-
每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时,浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然
- css相关规则
- Block元素会扩展到与父元素同宽,所以block元素会垂直排列
- 垂直方向上的两个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确)
- 浮动元素会尽量接近往左上方(或右上方)
- 为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素
2.4 BFC的应用
- 防止margin重叠
- 案例上下margin重叠
“`html
<!–<ul>
<li>@Autor: Clairoll</li>
<li>@Date: 2020-12-14 11:18:24</li>
<li>@LastEditTime: 2020-12-14 11:39:56</li>
<li>@Email: [email protected]</li>
<li>@description:
–>
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
.first {
margin: 20px;
background: lightgreen;
width: 100px;
height: 100px;
}
ul {
/* display:inline-block; */
margin: 10px;
background: lightblue;
}li {
margin: 25px;
}
</style><body class="claro">
<div class="first"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul></body>
</html>
“`
解决
“`html
<!–
<ul>
<li>@Autor: Clairoll</li>
<li>@Date: 2020-12-14 11:18:24</li>
<li>@LastEditTime: 2020-12-14 11:44:53</li>
<li>@Email: [email protected]</li>
<li>@description:
–>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
.first {
margin: 20px;
background: lightgreen;
width: 100px;
height: 100px;
}
ul {
display:inline-block; // 通过此处生成BFC
/* overflow:hidden; */
/*float: left;*/
/*position: absolute;*/
margin: 10px;
background: lightblue;
}
li {
margin: 25px;
}
</style>
<body class="claro">
<div class="first"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
“`
-
浮动相关布局问题
-
多栏布局