解决办法

1.在高度塌陷的父div里面加一个div：

<div id="a">

<div id="a1">

</div> <div id="a2">

</div>

<div style="clear: both;"></div>//加一个标签，清除浮动

</div>

优点：适合初学者，兼容性 强。 
缺点：代码不简练，不利于优化。

2.overflow + zoom方法

#a{ background: red;

/*第二种方法*/

overflow: hidden;

zoom:1; }

优点：兼容性强。 
缺点：对margin属性会有影响，不能设负值，会被裁掉。负值绝对定位也不可以。

3.after + zoom方法（绝杀)

#a{ background: red; zoom:1; }

#a:after{ display: block;

content: ‘.‘;

clear:both;

line-height: 0;

visibility: hidden; }

优点：通用，兼容性强 
缺点：不好记。

HTML--高度塌陷（css）几种小技巧

原文地址：https://www.cnblogs.com/sueing/p/9517869.html