HTML元素塌陷及解决方法

当父元素未设置宽高，宽高由子元素的内容撑开。然后对子元素进行绝对定位，
父元素设置 position: relative; 子元素设置 position: absolut; 会出现元素坍缩。

一、比较好的解决方案

父元素添加:after伪类, 设置如下CSS样式

.parent:after {
	content: "."; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
	display: block; /*使生成的元素以块级元素显示，占满剩余空间*/
	height: 0; /*避免生成的内容破坏原有空间的高度*/
	clear: both; /*闭合浮动*/
	visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
}

利用了伪类不在文档流中增加标签的特性，clear: both; 用于清除浮动。

二、参考

1. HTML 元素高度塌陷及解决办法