web解决高度塌陷问题（排版/结构混乱问题）

在web设计中，对于初学者高度塌陷时常见的问题，高度塌陷对于我们这种小白来说实际上就是结构混乱、重叠等
解决方案有两个：

1. BFC方案

   • 简介：（此方案的设置是针对父类的）页面中有一个隐含属性BFC(Block Formating Context)，该属性属性值只有打开或者关闭，默认为打开状态。
   • BFC打开后的元素具有的特征：
     父元素的垂直外边框不会和子元素重叠
     子元素不会被浮动元素覆盖
     父元素可以包含浮动的子元素
   • BFC的打开方式以及缺陷

方式	缺陷
设置浮动元素	会导致父元素的宽度丢失，且下方同级元素也会上移
设置元素的绝对定位	暂不确定
设置display：inline-block	对导致父类的宽度丢失，但不会引起后方元素上移
设置overflow：auto或者hidden（推荐）	暂时的缺陷最小

注：BFC在IE6以及以下的浏览器不能使用，但是他们具有替代此的功能（haslayout），功能与BFC相同
在IE6以及以下的浏览器目前最好用的为 ZOOM : 1 ;
ZOOM是放大的倍数，使用放大1倍时比例为1：1，所以不会产生影响
在IE6中直接对元素设置一个宽度，则会默认打开haslayout

2. clear方案
   简介：clear可以清楚其他浮动元素对当前元素的影响（clear是针对子类设置的）
   小妙招一：在高度塌陷的父元素后，添加一个空白的DIV，由于DIV没有浮动，所以他可以撑开父元素的高度，然后对其进行清楚浮动，这样就完成了撑开父元素，基本没有副作用，但是会添加多余的结构

   终极方案：采用css中的伪类设置（不会增加多余的DIV）

.类名 ：after{
	content：" ";/*为了不被显示在这里添加空白的内容*/
	display：block；
	clear：both；
}

/*特别注意 在IE6中这种方式依然不适用，还是需要使用zoom*/

仅供参考