(转载)html中div使用自动高度

为什么要使用div标签

1.更多的配置项，那就意味着更灵活，当然，难度也更高；

2.可以方便的容纳其他html标签；

    static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。absolute绝对定位，直接指定top，left，right，bottom。有意思 的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其 Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是 说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持。

    可以用“流”的概念来理解div的position属性，一个html文档可以看成一棵树，relative和static是在流中的，讲究先后顺序，位置和父节点及前面的兄弟节点是相关的，而absolute和fixed不在流中，不讲先后顺序，只和父节点相关。

float属性

    float指定了div的浮动模式，可取none|left|right，并使div丢失clear:both和display:block的样式，并使div不会向“自动高度”的父div索要位置，在下面自动高度里有讲到。

height属性

    height指定里div的高度，如果指定里height属性，就算高度不够容纳所有子元素，也不会被撑开。

自动高度

    未指定height属性时，div就会自动计算自己的高度。使用好div的自动高度，并不是一件很容易的事，我总结了一条原则：必须高到足够容纳最后一个向自己“索要”位置的子元素。一般子元素都认为会向div索要位置，但设置了float属性的div标签是不会的

    代码：

<div style="200px;border:1px solid red;">
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果：

    可以看到，红色边框的div并没有被撑开。

    下面我们加点代码：

<div style="200px;border:1px solid red;">
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>

    效果：

    把红色的代码上移试试：

<div style="200px;border:1px solid red;">
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果：

    现在，读者应该理解：必须高到足够容纳最后一个向自己“索要”位置的子元素的意义了。

    如果父元素也设置float属性呢？代码：

<div style="float:left;200px;border:1px solid red;">
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果：

    这下红框的div撑开了，但它把问题抛给了它的上级。

    如果不想在每段代码的地方都加一个空的div，那就用css来解决吧，css代码：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;

　 overflow:hidden;

    visibility: hidden;
}

    html代码：

<div style="200px;border:1px solid red;" class="clearfix">
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果也会撑开父div。就不贴图了。注意：某些windows系统下的某些版本可能并不支持通过css这样设置。

原博客地址：html中div使用自动高度，即不设置height属性要注意的问题