起因：盒子的高度问题
在没有给盒子设置高度的情况下
（1）如果在标准流中一个盒子里面有多个标签，并且该盒子没有设置高度，那么盒子的高度就由盒子内的多个标签的内容高度撑起。
（2）如果一个盒子里面多个标签都被设为了浮动，那么浮动元素内容的高是不可以撑起盒子的高。
image.png
浮动带来的问题:
(1)如果一个盒子里面多个标签都被设为了浮动，那么浮动元素内容的高是不可以撑起盒子的高。
清除浮动
1、
外墙法和内墙法
外墙法是在父盒子的外面增加一个div，然后设置其clear:both,这样虽然可以清处浮动不影响后面的盒子的布局，但是撑不起盒子的高度
内墙法是在父盒子的里面的最后面增加一个div，然后设置其clear:both,这样可以清楚浮动并撑起高度
2、
clear:both
content:".",里面尽量有内容，如一个小点，为了防止之前的浏览器有空隙,这里的图片也没有加内容，以后记得加
height:0,因为增加了内容，所以会自动有高度和宽度，因为我们不想让这个伪元素显示出来，所以设置了高度为零
visibility:hidden，这个是设置该元素为隐藏
image.png
3、双伪元素清除浮动(强烈推荐)
不仅可以清除浮动，也可以解决高度塌陷的问题（给父盒子添加类名clearfix）
.clearfix:before,
.clearfix:after {
display: table;
content: ""; /*不用有内容也可以*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
