高度塌陷及外边距重叠
解决：
.clearfix:after,
.clearfix:before{
content: '';
display: table;
clear: both;
}
一、高度塌陷问题
高度塌陷是浮动布局中比较常见的一个问题。在浮动布局中，父元素的高度默认是被子元素撑开的，但，当子元素浮动后，子元素会完全脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会上移，导致页面布局混乱。
举个栗子：
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
<style>
.div1{
border: 10px solid red;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
运行结果如下：
很明显：红色父元素已经出现高度塌陷的问题。
为了解决这个问题，我们需要了解下BFC
使用BFC解决高度塌陷
BFC
BFC(Block Formatting Context)块级格式化上下文
BFC是一个css中的一个隐含属性，可以为一个元素开启BFC，开启BFC后，该元素会变成一个独立的布局区域
元素开启BFC后的特点：
-
开启BFC的元素不会被浮动元素所覆盖
-
开启BFC的元素子元素和父元素外边距不会重叠
-
开启BFC的元素可以包含浮动的子元素
如何开启BFC
1、设置元素的浮动（不推荐）
2、设置元素为行内块元素（display:inline-block;不推荐）
3、将元素的overflow设置为一个非visible的值 – 常用方式： overflow: hidden/auto;
了解完BFC，我们就可以很好的解决高度塌陷问题了，只需要给父元素开启BFC即可：
.div1{
border: 10px solid red;
overflow: hidden;
}
运行看效果，可以看到，父元素已经被很好的撑开了
使用clear属性解决
我们也可以使用clear属性解决问题，
首先，在父元素中添加一个元素div3
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
为div3设置样式
.div3{
clear: both;
}
看效果：
使用伪类解决高度塌陷
第三个可以很好的解决高度塌陷问题，但是我们凭空添加了一个div元素。所以我们想到了使用伪类解决这个问题，也是我们的终极方案：
.div1::after{
content: "";
display: block;
clear: both;
}
二、外边距重叠问题
举个栗子
<div class="outer">
<div class="inner">
</div>
</div>
<style>
*{
padding: 0;
margin: 0;
}
html{
border: 1px solid #444444;
}
.outer{
width: 200px;
height: 200px;
background-color: red;
}
.inner{
margin-top: 30px;
width: 100px;
height: 100px;
background-color: #008000;
}
</style>
我们想让绿色盒子margin-top:20px;但是发现，红色盒子具备了这个属性，这就是外边距重叠问题
为了解决这个问题，我们可以给红色盒子，添加
padding:20px
解决,但不优雅，基于刚才的伪类元素，我们想到了使用before伪类添加一个元素将其与绿色盒子隔开即：
.outer::before{
content: '';
display: table;
clear: both;
}
完美解決
综上所述，我们编写一个元素类clearfix,可以同时决绝高度塌陷和外间距重叠的问题，
.clearfix:after,
.clearfix:before{
content: '';
display: table;
clear: both;
}