bfc块级格式化上下文

bfc概念

1. BFC 即 Block Formatting Contexts (块级格式化上下文) 页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
2. 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
3. BFC 区域不会与 float box 重叠
4. BFC 是页面上的一个独立容器，子元素不会影响到外面（默认body为一个bfc容器）
5. 计算 BFC 的高度时，浮动元素也会参与计算
6. 只要元素满足下面任一条件即可触发 BFC 特性：
   1. body 根元素
   2. float 除 none 以外的值
   3. position 为 absolute、fixed
   4. display 为 inline-block、table-cells、table-caption，flex，inline-flex 的元素
   5. overflow 为 hidden、auto、scroll放在body下
7. 一个BFC区域只包含其子元素，不包括其子元素的子元素。
8. 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
9. 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

高度塌陷

.father{
    width:300px;
    height: 300px;
    background-color: red;
    overflow: hidden;
}
.son{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top:50px;
}
1
2
3
4
5
6
7
8
9
10
11
12

<div class="father">
    <div class="son">div>
div>
1
2
3

清除浮动

.father{
    width:300px;
    background-color: red;
    overflow: hidden;
}
.son{
    width: 100px;
    height: 30px;
    background-color: yellow;
    border: 1px solid lime;
    float: left;
}
1
2
3
4
5
6
7
8
9
10
11
12

<div class="father">
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
div>
1
2
3
4
5
6
7
8
9
10

margin重叠1

#c1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    margin: 10px;
}

#c2 {
    margin: 10px;
    width: 120px;
    height: 120px;
    background-color: blue;
    float: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="c1">div>
<div id="c2">div>
1
2

margin重叠2

#c1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    margin: 10px;
}
#c2 {
    width: 120px;
    height: 120px;
    background-color: blue;
    margin: 10px;
}
#wrap{
    overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="c1">div>
<div id="wrap">
    <div id="c2">div>
div>
1
2
3
4