一：介绍
1
2
| 之前说过相邻的外边距，给子元素设置外边距以后其父元素也会有此特性，
下面介绍如何通过css解决这种问题。
|
二：方案
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
| <style>
.box1{
width:200px;
height:200px;
background-color:red;
}
.box2{
width:100px;
height:100px;
background-color:blue;
}
.box2::before{
content:'',
display:table;
}
</style>
<body>
<div class=".box1">
<div class=".box2">
</div>
</div>
</body>
|
1
2
| 通过在box2前面加上content为空，并且设置显示方式为table，
就做到了相邻子元素和父元素中间做了隔离。
|
三：浮动+外边距重叠
1
2
3
4
5
6
7
8
9
| .clearfix::before,
.clearfix::after{
content:'',
display:table,
clear:both;
}
其中clearfix是要设置元素的类，这样就做到了解决父元素的高度缺失，
以及相邻两个子父元素的外边距重叠。
|
*************感谢您的阅读*************
