css代码： 代码如下 复制代码

#demo {border: 1px black dashed;} .column { float: left; padding: 10px 0; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} .clear { clear:both;}

方法二：

此方法需要依赖于下面两行文档类型的声明: 代码如下 复制代码

css代码: 代码如下 复制代码

#demo {border: 1px black dashed;} .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} [xmlns] #demo {overflow:auto;} /* For IE7 and non-IE */* html #demo {height:1%; } /* IE only */

方法三：

非IE浏览器利用伪类 :after，IE浏览器利用其特有属性zoom。

css代码： 代码如下 复制代码

#demo {border: 1px black dashed; zoom: 1; /* IE only */}

#demo:after { content: "."; display: block; clear: both; height: 0; font-size: 0; line-height: 0;} /*IE8 and non-IE*/

.column { float: left; padding: 10px; margin: 10px; width: 200px;}

#c1 {border: 1px red dashed;}

#c2 {border: 1px green dashed;}

#c3 {border: 1px blue dashed;}

overflow解决float浮动后高度自适应的问题

经发现可以采用overflow来解决！方法是在父元素加上如下代码即可：

overflow:auto;zoom:1;

“overflow:auto;”是让高度自适应，“zoom:1;”是为了兼容IE6，也可以用“height:1%;”来解决。

完整的代码如下： 代码如下 复制代码

float浮动之后的问题

*{padding:0;margin:0;}

body{font-size:12px;line-height:150%;}

ul{list-style:none;}

.container{width:700px;margin:0 auto;}

.header,.footer{height:60px;background:#99CC66;margin-bottom:6px;font-size:18px;font-weight:bold;}

.main{}

.left{float:left;width:200px;}

.sidepanel{border:1px solid #CC6600;margin-bottom:8px;}

.sidepanel h2{font-size:12px;background:#CC6600;height:24px;line-height:24px;text-indent:20px;color:#fff;}

.city{padding:6px 0px;overflow:auto;zoom:1;}

.city li{float:left;width:35px;text-align:center;}

.right{margin-left:200px;background:#CCCC66;height:240px;}

.hotinfo{padding:6px;}

.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}

实例参考 http://www.111cn.net/js_a/87/43100.htm

要注意以下几点：

1、  浮动元素会被自动设置成块级元素，相当于给元素设置了display:block(块级元素能设置宽和高，而行内元素则不可以)。

2、  浮动元素后边的非浮动元素显示问题。

3、  多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。

4、子元素全为浮动元素的元素高度自适应问题。