-
Notifications
You must be signed in to change notification settings - Fork 27
/
BFC.html
85 lines (62 loc) · 2.23 KB
/
BFC.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BFC块级格式上下文</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer {
width: 320px;
border: 1px solid red;
}
.inner {
width: 200px;
height: 200px;
/*border: 1px solid red;*/
margin: 0 auto;
}
.con {
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 30px auto;
}
</style>
</head>
<body>
<!--
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠
解决ff:
1. 给父元素增加属性：overflow:hidden;
2. 给父元素增加边框，如果不需要边框则加一个透明边框，不会影响到样式
3. 可以用父元素的padding-top来代替子元素的margin-top
4. 给父元素添加属性 position：absolute
例子如下：
-->
<div class="outer">
<div class="inner">
<div class="con"></div>
</div>
</div>
<!--
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响
BFC布局规则：
1.内部的块级元素会在垂直方向，一个接一个地放置
2.块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并
3.每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此
4.BFC的区域不会与float box重叠
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素
6.计算BFC的高度时，浮动元素也参与计算
创建一个BFC只要满足下列条件之一:
1.float的值不为none
2.overflow的值不为visible
3.position的值为fixed / absolute
4.display的值为table-cell / table-caption / inline-block / flex / inline-flex
-->
</body>
</html>