先重现一遍两个块级元素在上下margin方向的重叠现象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 重现浮动 -->
/* 重现浮动*/
.contain {
color: #fff;
}
.first {
margin-bottom:20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: black;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: red;
}
<div class="contain">
<div class="first">first </div>
<div class="second">second </div>
</div>

margin重现

此处我们可以看到,当第一个(first)拥有的margin-bottom:20px;与第二个(second)div块所拥有的margin-top:20px;叠加在了一块

而我们根据BFC(块级格式化上下文)我们可以在必要时候有效避免这种现象对于我们布局的影响
而我们创建BFC的条件有以下几种情况:

  • float不是none,使该元素浮动起来
  • position的值不是static或者relative
  • display的值是inline-block,table-cell, flex,table-caption, inline-flex
  • overflow不是visible

BFC的特征:

  • 所有子元素包括浮动元素,与容器左边对齐
  • 属于同一个BFC的父元素与子元素,相邻的父子或者兄弟间的margin垂直方向会重叠,若两个元素属于不同BFC,则垂直方向上不重叠
  • 可以撑开容器(若子元素是float,则父元素设置overflow:hidden,父元素就形成一个BFC

因此我们实践尝试如何使用形成BFC解决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
/* 清除margin方式1*/
.contain1 {
color: #fff;
}
.first1 {
margin-bottom:20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: yellow;
}
.second1 {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: blue;
}
<!-- 清除,margin重叠方式1 通过新增父元素,形成一个新的BFC块 -->
<div class="contain1">
<div class="first1"> first 1</div>
<div style="overflow:hidden;">
<div class="second1"> second1</div>
</div>
</div>

效果:
margin重叠解决方式1

我们为second块元素,新增一个父元素,并且设置其overflow,成功使得first1与second1分别归属不同的BFC块,从而结局margin重叠问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 清除margin方式2*/
.contain2 {
color: #fff;
width: 200px;
}
.first2 {
margin-bottom:20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: red;
}
.second2 {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: blue;
}
<!-- 清除margin重叠方式2,子元素浮动 :相邻的子元素都浮动,或者下面的那个浮动-->
<div class="contain2">
<div class="first2"> first 2</div>
<div class="second2" style="float: left;"> second 2</div>
</div>

我们使得相邻兄弟元素浮动的形式,满足float不等于none,从而使得second2形成一个新的BFC块,而解决margin重叠的问题

效果:
margin重叠解决方式2