当父元素未设置高度和宽度的时候，子元素浮动时，那么父元素的高度就会塌缩为零，前提是它只包含浮动元素，解决高度塌陷的问题很简单，可以浮动父级元素、清除法等等，均可实现。下面一一为大家稍微解说一下。首先来个例子：
|
<html> <style> } ul{ </head> <body class="clar"> </div> <!--<div style="clear:both"></div>--> </html> |
解决办法主要有：第一，子元素中用padding设置边距而不是margin；第二，父元素中加入padding或者border，给你的子元素一个限制；第三，父元素添加overflow：hidden；
第四，用清除浮动的方式，最科学的清除浮动方式为父div的css样式设置：div:after{clear:both;display:block;content:"";},还有一个方法就是给父元素的最后加一个空div，空div的css样式设置成{clear：both；}
原理就是：一个父div如没有上补白padding和上边距border限制咋其中的子元素，这个div边距会和子div最大边距合并（同级的div间没有此情况）。