当有浮动float时，最外框会不跟随内容的高度而高；
解决办法一：
清除浮动 clear:both
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap{background:red;width:1000px;margin:auto;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>
解决办法二：
给最外框加 overflow:hidden; zoom:1;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap{background:red;width:1000px;margin:auto;overflow:hidden; zoom:1;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
解决办法三：
给外框加属性 content: "";display: table;line-height: 0;clear: both;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap:before, .wrap:after {content: "";display: table;line-height: 0;clear: both;}
.wrap:after {clear: both;}
.wrap {margin: 0 auto;width: 1000px;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
CSS最小高度与自适应高度并存
div{_height:200px; min-height:200px
/* 注释：两个放置不分前后顺序，兼容所有浏览器 */}
3633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
