1、高度坍塌
原因：文档流中，在没有设置高度时，父元素的高度默认是被子元素撑开的。当子元素设置浮动之后，子元素就会完全脱离文档流，此时就没有子元素撑起父元素的高度，因而导致父元素的高度塌陷。
解决方案：
（1）为父元素设置高度。弊端：每次的高度不一样，未知数。
（2）为父元素一起设置浮动。弊端：影响后续代码
（3）在父元素设置overflow：hidden/auto；弊端：所有溢出都会隐藏。不推荐。
（4）在父元素后面追加一个空的块级元素div，不写宽高，只需要写clear：both；
（5）对（4）的优化：
使用伪元素选择器，内容生成：
#parent::after{
content:"";
display:block;
clear:both;
}
2、清除浮动：
目的：阻止后面子元素上前部位。也是引起高度坍塌的原因。
（1）增加空标签clear：both；弊端：增加无意义的代码。
（2）增加空标签：
overflow：auto；弊端：增加无意义的代码。超出范围生成一个滚动条。
overflow：hidden；弊端：增加无意义的代码。直接隐藏不占文档流空间
（3）使用伪元素选择器，内容生成：
#parent::after{
content:"";
display:block;
clear:both;
}
3、外边距溢出（外边距合并）
（1）使用伪元素选择器，内容生成：
#parent::before{
content:"";
/此table不是table标签，而是table的显示方式/
display:table;
}