CSS BFC的理解

BFC

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

在 Web 页面的 CSS 渲染中,BFC (Block Fromatting Context)块级格式化上下文,即 BFC 区域是一块独立的块级渲染区域,并且拥有一套渲染规则,来约束盒子布局,且与外部区域无关,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列

创建BFC

W3C 中对于 BFC 是这样说的:

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)

简单粗暴来讲就是,满足以下任意一个条件或者多个条件即形成 BFC

  1. float 值不是 none
  2. overflow 值不是 visible
  3. display 值是 inline-block、table-cell、table-caption、flex 或 inline-flex
  4. position 值是 absoulute或fixed

所以只要满足了上述条件一个或多个,即形成 BFC

1
2
3
<div class = "container">
内容区域
</div>
1
2
3
.container {
overflow: hidden;
}

BFC的约束规则

浏览器对于BFC这块区域的约束规则如下:

  1. 在 BFC 区域,其内部元素会在垂直方向,一个接一个的排列,第一个元素的左上角顶部和 BFC 区域左上角顶部重合
  2. 且每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left),(对于从右到左的格式来说,则触碰到右边缘)
  3. 垂直方向上的距离由margin决定,相邻两个兄弟元素(例如上兄弟元素的margin-bottom和下兄弟元素的margin-top会发生重叠),但与方向无关,水平方向也可以发生重叠,一般很少
  4. 每个元素都不会超过它的包含块,即不会超过 BFC 区域,浮动元素也不例外,而position为absolute的元素可以超出他的包含块边界
  5. BFC 区域是一块隔离的区域,与外界无关

BFC

BFC的应用

BFC 在页面布局中有很多应用,有很多其实已经用过,但是原理是要慢慢去领悟,例如:

  1. 垂直方向防止 margin 重叠
  2. 浮动元素会尽量接近左上角
  3. 为父元素设置 overflow: hidden;来清除浮动

…….等

margin重叠

同一个 BFC 区域的两个相邻子元素的相邻的margin会发生重叠

margin嵌套重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>

<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>


</head>

<body class="claro">
<div class="first"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

</html>

这里给了 .first盒子和ullimargin值分别为20px10px25px

在浏览器的控制面板调试如下图

此时,垂直方向上,div.fristul两个盒子之间的距离是25px,由.firstulli三者中最大的margin决定

margin

解决 margin 嵌套重叠:

  1. 如上例子,将例子中的 注释部分display:inline-block;去掉再去浏览器看看结果,就可以解决margin嵌套重叠的问题了,margin此时的值是二者之和30px

  2. 原理是:ul形成了一个BFC区域,它和上面的div.first都是独立的BFC区域,互不影响。

ul BFC区域中的问题:

但是此时,去看看ul中的limargin仍然是存在问题的,依然发生了margin嵌套重叠,因为此时li是属于ul这个封闭的BFC区域的

BFC中的浮动

当给一个父元素的子元素设置浮动的时候,父元素往往会发生高度塌陷,即父元素高度变为0

原因:浮动元素会脱离文档流(像绝对定位的元素也会脱离文档流),所以此时如果没有高度的容器的子元素是浮动元素,则该容器是不会被撑开的

常见的解决办法是:给父元素加overflow: hidden;清除浮动

原理:创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可,并不只有这两种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
background-color: green;
/*overflow: hidden;*/
/*display: inline-block;*/
/*display: table-cell;*/
/*display: flex;*/
/*display: table-caption;*/
/*display: inline-flex;*/
/*float: left;*/
/*float: right;*/
/*position: absolute;*/
/*position: fixed;*/

}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
</body>
</html>

将上段代码复制到你的编译器中,打开浏览器,打开控制面板,我们看一下,两个字元素是浮动的,父元素div.container`是没有高度的,原因正如上面解释的一样

BFCmargin

解决办法:将我上面代码中的注释去掉任意一个,都可以解决这种父元素塌陷的问题

原理正如上面解释的一样,创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可,并不只有这种方式

此时再去打开浏览器看看,父元素div.container就有高度了

拓展:一般清除浮动最常用的方式,双伪元素清除浮动,若子元素需要浮动,则给其父元素加一个类clearfix使其形成BFC即可

1
2
3
4
5
6
7
8
.clearfix:before, .clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
overflow: hidden; // 形成 BFC
}

多栏布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>

<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left {
background: yellow;
float: left;
width: 180px;
}
.center {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}
</style>


</head>

<body class="claro">
<div class="container">
<div class="left">
<pre>
.left {
background: yellow;
float: left;
width: 180px;
}
</pre>
</div>
<div class="right">
<pre>
.right {
background: blue;
width: 180px;
float: right;
}
</pre>
</div>
<div class="center">
<pre>
.center {
background: red;
overflow: hidden;
height: 116px;
}
</pre>
</div>
</div>

</html>

这种布局的特点在于左右两栏宽度固定,中间栏可以根据浏览器宽度自适应

多栏布局1

多栏布局2

本文标题:CSS BFC的理解

文章作者:王工头

发布时间:2019年01月23日 - 18:17:55

最后更新:2019年01月25日 - 13:15:20

原始链接:https://qqqww.com/CSS-BFC的理解/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------