html css中解决高度塌陷问题的几种方法

一、bfc（block formatting context）
根据W3C的标准，页面中的元素都有一个隐含属性block formatting context，
当开启元素的bfc属性以后元素会有如下特性：

1. 父元素你的垂直外边距不会和子元素重合，也就是子元素的垂直外边距不会传递给父元素。
   
2. 开启bfc属性的元素不会被浮动元素所覆盖
   
3. 开启bfc的元素可以包含子元素

如何开启元素的bfc属性

1. 设置元素浮动（使用这种方法虽然可以撑开父元素，但是会导致父元素宽度丢失，且由于父元素脱离了文档流，下面的元素依然会发生上移。所以不能解决高度塌陷问题）
2. 设置元素绝对定位（这种方式和第一种一样的）
3. 设置元素为inline-block（display:inline-block;可以解决高度塌陷问题，下面的元素也不会发生上移，但是依旧会产生父元素宽度丢失，不推荐使用)
4. ***设置overflow属性为非visible的值***（设置为auto和hidden是解决高度塌陷副作用最小的一种方式，不过IE6及以下的浏览器不支持overflow：hidden；不过ie浏览器有另一个隐藏属性haslayout，该属性和bfc属性类似，可以通过设置zoom：1；来开启该属性。zoom可选值写几就放大几倍，但是其他浏览器不支持，只有ie支持，可以将overflow和haslayout都开启来兼容所有浏览器）

二、clear清除浮动
当一个元素设置了浮动时，他的下面那个兄弟元素会产生上移，要解决这个问题可以为上移元素设置clear：left；或者right或者both（清除浮动最大的影响，要么左，要么右）那么元素就不会产生上移，可以利用这个特点解决高度塌陷问题。

解决方法，可以在浮动元素下面添加一个空白的块元素，对块元素添加清除浮动属性。（副作用很小，但是会添加多余的结果）

既不添加多余的结构，又解决高度塌陷问题：
通过after伪类添加一个空内容，将空内容转换成一个块元素，再对after清除浮动就能撑开父元素，解决高度塌陷问题。

.clearfix：after{
							content=”“；
							display：block；
							clear：both；
						}
				/*兼容ie6*/
				.clearfix{
								zoom:1;
							}