CSS外框高度自动适应

当有浮动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 
/* 注释：两个放置不分前后顺序，兼容所有浏览器 */}

 

posted @ 2014-08-07 09:17  microsoftzhcn  阅读(2181)  评论(0)  编辑  收藏  举报