html中div使用自動高度，即不設置height屬性要注意的問題

爲何要使用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="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果：

    能夠看到，紅色邊框的div並無被撐開。

    下面咱們加點代碼：

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

    效果：

    把紅色的代碼上移試試：

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

    效果：

    如今，讀者應該理解：必須高到足夠容納最後一個向本身「索要」位置的子元素的意義了。

    若是父元素也設置float屬性呢？代碼：

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

    效果：

    這下紅框的div撐開了，但它把問題拋給了它的上級。

    若是不想在每段代碼的地方都加一個空的div，那就用css來解決吧，css代碼：

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

    html代碼：

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

    效果也會撐開父div。就不貼圖了。注意：某些windows系統下的某些版本可能並不支持經過css這樣設置。