为什么父容器的高度不能自适应 CSS解决不能撑开实现自适应高度

2016-07-21 19:07:07 为什么父容器的CSS高度不能自适应。使用了float不能撑开父级DIV解决方法。

火狐浏览器下为什么父容器的CSS高度不能自适应（css高度自适应）

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<title>测试内容HTML8</title> 
<style type="text/css"> 
div {width:200px;border:1px solid red} 
p {float:left;width:100px;} 
</style> 
</head> 
<body> 
<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大
全web标准常见问题大全web标准常见问题大全web标准常见问题大全web
CSS测试内容标准常见问题大全web标准常见问题大全web标准常见问题大
全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准
常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大
全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准
常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标
准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常
见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web
标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见
问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
web标准常见问题大全web标准常见问题大全</p></div> 
</body> 
</html>

为什么这个P撑不开DIV呢？解决的办法是在div与 p之间插入<div style="clear:both"></div>清除掉这个p的浮动。

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

另外一种简单的CSS解决方法：这里如果对DIV设置overflow:hidden样式也可以解决让css height自适应高度，这样P就可以撑开DIV了。