clear为何能实现自动高度-HTML教程-爱易网页

clear为何能实现自动高度

日期：2014-05-17　浏览次数：20859 次

clear为什么能实现自动高度

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>div自动高度</title>  
        <style type="text/css">  
            .content{
                margin: 0 auto;
                width: 1000px;
                border: 1px solid red;
            }
            #left{
                width: 100px;
                height: 400px;
                border:1px solid blue;
                float: left;
            }
            #right{
                width: 800px;
                height: 400px;
                border:1px solid green;
                float: left;
            }
            .clear{
                clear: both;
            }
        </style>  
    </head>  

    <body>  
        <div class="content">
            <div id="left">
            </div>
            <div id="right">
            </div>
            <!--
            <div class="clear"></div>
            -->
        </div>
    </body>  
</html>

上面的clear被注释后外面content 的高度不会自动增长，但是有了clear之后外面的content的高度自动增长了，这是为什么呢，clear不是只能清楚左右的浮动元素吗？

------解决方案--------------------
不是clear能实现自动高度，而是content里面的div设置浮动后，在比较标准的浏览器中，比如FF，content不能自动增加高度，你可以清除浮动或者把content也设置浮动
------解决方案--------------------
好像只能意会不能讨言传~~~~o(∩_∩)o~哈哈
------解决方案--------------------
按理说，content的div的高度是根据其子元素的高度确定的，而content的3个子元素，两个的高度都是确定的，只有你注释掉的那个是自适应高度的~~所以content的不会再变了吧~~
------解决方案--------------------
class=content的那个div，下面有三个子div，其中两个#left，#right，这两个的高度在style部分都固定了，只有第三个class = clear的div是自适应高度的，
你把#left的height属性删除，再试试，看是不是content的高度会变成自动增长的
------解决方案--------------------
相当于给content一个overflow:hidden;
------解决方案--------------------
呵呵，楼主你这个问题我也遇到过，这是因为当有一个DIV作为外部容器的时候，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开，像这样的解决方式有三种：
1、第一种就像楼主所说的(不介意使用这种方法，因为人为的加一个无用的div，会导致遍历的时候出现多余的这个div)
2、子容器有float,则父容器相应的也用float属性，如下：

CSS code


        .content{
            margin: 0 auto;
            width: 1000px;
            float: left;
            border: 1px solid red;
        }
        #left{
            width: 100px;
            height: 400px;
            border:1px solid blue;
            float: left;
        }
        #right{
            width: 800px;
            height: 400px;
            border:1px solid green;
            float: left;
        }

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

clear为何能实现自动高度

相关资料更多>

推荐阅读更多>