html父元素浮动高度,让浮动元素父容器自适应高度的三种方法

2012-11-2更新

关于清除浮动，下面的方法虽然有效，但已经有些旧了，建议大家看这篇文章推荐的清除浮动的方法

浮动元素由于脱离了文档流，无法撑起其父元素的高度，如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种：

方法中使用到的css定义

.fl { float: left }

.cb { clear: both }

/*用于清除浮动的类*/

/*这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素*/

.clearfix:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

/* 这是对 Mac 上的IE浏览器进行的处理 */

.clearfix {

display:inline-block

}

/* 这是对 win 上的IE浏览器进行的处理 */

* html .clearfix{

height: 1%

}

/* 这是对display: inline-block;进行的修改，重置为区块元素*/

.clearfix {

display:block

}

1. 让父容器同时浮动起来，例如：

缺点：父元素也浮动起来，影响后面元素的布局

2. 让浮动元素后面紧跟一个用于清除浮动的空标签，例如：

缺点：增加了一个空标签，破坏了语义化

3. 给父容器挂上一个特殊的class，直接从父容器清除浮动元素的浮动，例如

关于clearfix类的解释转载自 http://hi.baidu.com/%C4%CE%B6%F9nye/blog/item/5e0ed14bbaa99f2a09f7ef21.html