CSS高度塌陷

標籤：style   blog   http   color   使用   ar   2014   div   sp   

問題描述：當父元素只包含浮動的元素的時候，且父元素沒有設定高度，如果父元素設定了邊框border，那麼看起來子項目不在父元素之內。

比如這樣：

html：

<div id="parent">    <div class="left"></div>    <div class="right"></div></div>

CSS：

    div {        border: 2px solid #000;    }    .left {        width: 100px;        height: 100px;        float: left;    }    .right {        width: 200px;        height: 200px;        float: left;    }

結果是這樣的：

這就是高度塌陷的問題，各個瀏覽器，包括IE6都是這樣的。

 

解決方案：

父元素設定overflow：hidden 即：

    #parent {        overflow: hidden;    }

或者：

添加一個子項目清除浮動。

    .clear {        width: 0;        height: 0;        clear: both;        visibility: hidden;    }

 

上面的方法在除了IE6的瀏覽器都是有效，：

但IE6中，overflow:hidden，直接沒作用，清除浮動後卻是這樣的：

父元素斷了。。。。。

 

可以使用IE6中的一個bug，他的height和min-height作用一樣，所以可以給父元素任意設定一個高度。

    #parent {        * height: 1%;    }

由於是專為IE6設定的，前面加個*號，只有IE識別。

這樣不論是overflow還是clear效果都可以了。

 

但是還有一個問題，雖然高度都擴充了，但是使用overflow，底邊是緊貼的，使用清除浮動時候的是有一定間距的。

在《精通CSS》一書中是這樣的解決的。

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

以這樣的方式來清除浮動。

這樣效果就統一了。

 

在其他的部落格中，還看到，其實針對IE6還可以使用zoom：1。

 

總結一下，方法還是挺多，使用overflow簡單，也不用額外引入元素，但有時候會引起捲軸的問題。

清除浮動通用，但會引入其他外部元素。

CSS高度塌陷