解决HTML页面元素浮动之后最近元素高度塌陷的问题

浮动之后会有问题：最近的父元素会高度塌陷，前提是所有的子元素浮动，且父元素没有设置高度
解决方法：8种

1、给父元素添加固定高度，适合高度固定的布局

2、给父元素添加overflow：hidden；zoom:1;(针对IE6的兼容，可以不写)
缺点:会对溢出的内容隐藏裁剪，不显示。

3、给所有浮动元素的最后添加一个空的标签 ，并且添加声明clear：both；height：0； overflow:hidden;(添加height：0；和overflow：hidden；是为了避免这个空标签如果是li的话，在IE6和IE7上有默认高度撑着，所以要解决一下。)
缺点:就是造成代码的冗余。

4、万能清除法（更适合整站开发）
给塌陷的元素加
: /::after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

如 : ul塌陷，ul：content：”位置”…（引号中可以书写内容，便于显示调试）
原理：相当于在浮动的元素后面加了一个行内标签，然后display:block转块标签竖着排列，撑开该元素；clear:both清除浮动，则与目标元素不层叠；
height：0;overflow:hidden考虑IE6、IE7等低版本浏览器兼容问题；
visibility: hidden;是为了隐藏content里面的内容
单冒号:after对于IE8以下有兼容问题，所以给塌陷的元素{zoom：1；}

高度塌陷的其他解决方法（可做了解）

1、父元素也浮动（只能解决一个问题，同时也引发了其他的浮动问题，没有任何优点）

2、给父元素display:table;（转成表格元素，会有新的问题，表格边框…）

3、可以给父元素添加overflow：auto/scroll;(容易产生滚动条)

4、 结尾处加 br标签 clear:both

补充1： zoom 可以实现缩放效果 默认值是1 比1大是放大，比1小是缩小，但是仅仅是视觉放大或者缩小，实际并没有变。如果网站开发里面需要涉及到缩放了，不要用zoom；因为zoom只是视觉放大或者缩小。我们只是用来解决IE7或者IE6以下的兼容问题，其他情况下用不到。

补充2：万能清除法，在使用的时候，会创建一个公共的类，然后谁塌陷去调用这个公共的类，类似之前的版心公用。<div class=”main clearall”>