高度坍塌、清除浮动和外边距溢出（合并）的解决方案

1、高度坍塌
原因：文档流中，在没有设置高度时，父元素的高度默认是被子元素撑开的。当子元素设置浮动之后，子元素就会完全脱离文档流，此时就没有子元素撑起父元素的高度，因而导致父元素的高度塌陷。

1. 子元素浮动 引起
2. 子元素绝对定位引起

解决方案：
（1）为父元素设置高度。弊端：每次的高度不一样，未知数。
（2）为父元素一起设置浮动。弊端：影响后续代码
（3）在父元素设置overflow：hidden/auto；弊端：所有溢出都会隐藏。不推荐。
（4）在父元素后面追加一个空的块级元素div，不写宽高，只需要写clear：both；
（5）对（4）的优化：
使用伪元素选择器，内容生成：

#parent::after{
	content:"";
	display:block;
	clear:both;
}

2、清除浮动：
目的：阻止后面子元素上前补位。浮动也是引起高度坍塌的原因。

（1）使用带clear属性的空元素：
在浮动元素后增加空标签，并添加样式clear：both；
优势：简单，代码少，浏览器兼容性好。
弊端：增加无意义的代码，代码不优雅，后期维护难。

（2）使用CSS的overflow属性：
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动。
添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
overflow：auto；弊端：增加无意义的代码。超出范围生成一个滚动条。
overflow：hidden；弊端：增加无意义的代码。直接隐藏不占文档流空间

（3）使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
使用伪元素选择器，内容生成：

.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

3、外边距溢出（外边距合并）
原因：

• 父元素 div 未设置边框
• 第一个子元素设置了上外边距（margin-top: 10rem;）或者 最后一个子元素设置了下外边距（margin-bottom:
  10rem;）
• 导致父元素与子元素一起发生相应的偏移的现象，即为：外边距溢出现象

（1）使用伪元素选择器，内容生成：

/* 上外边距溢出 /
.div-parent::before {
/*此table不是table标签，而是table的显示方式*/
display: table;
content: "";
}

/* 下外边距溢出 */
.div-parent::after {
/*此table不是table标签，而是table的显示方式*/
display: table;
content: "";
}