清除浮動

antz 發(fā)布于2019-08-29 11:29 / 1688人閱讀

摘要：清除浮動是用于什么場景父元素內(nèi)部的子元素浮動后，會造成父元素的塌陷，父元素的高度為，因而不會顯示樣式。評價這是最優(yōu)的清除浮動的方案。

清除浮動是用于什么場景？

父元素內(nèi)部的子元素浮動后，會造成父元素的塌陷，父元素的高度為0，因而不會顯示樣式。

有時候，父級元素本來就是沒有樣式的，那么他塌陷不塌陷無所謂咯，不不不，圖森破，如果父級元素后面還有元素，由于父級元素的塌陷，他們就會上來占據(jù)父級元素的位置，效果就是，子元素覆蓋在了父級元素下面元素的上面。
所以，在需要應(yīng)用父級元素的樣式的時候，在不希望子元素覆蓋父級下一個元素的時候，要清除浮動

讓我們來清除調(diào)皮的浮動！ 方法一：空元素追加法

html:


    Box 1
    Box 2
    Box 3

css:

.box-set{
    background-color: #e8aaa9;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}
.clean{
    clear: both;
}

我的理解：

因為空元素的存在，父級元素識別內(nèi)部元素整體時不再認(rèn)為是浮動的，是有寬高的，因此并未塌陷。

不足之處：

給html加個空標(biāo)簽雖然簡答有效，但它是語義化極差的，不推薦。

方法二：overflow技巧

html：


    Box 1
    Box 2
    Box 3

css:

.box-set{
    background-color: #e8aaa9;
    overflow: hidden;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

overflow做了什么？

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。

我的理解：

overflow為父元素提供了一種檢查內(nèi)部元素的機制，在檢查的過程中，識別出了內(nèi)部的高度，父元素被撐起。

不足之處：

從效果圖上，細(xì)心的你一定發(fā)現(xiàn)了overflow技巧和追加空標(biāo)簽的差別，是的，overflow把box的陰影給截斷了，可能是父級元素并不將shadow的寬高值計入內(nèi)部總寬高中，因此忽略。很多時候我們并不希望發(fā)生這樣的事情。

方法三：clearfix技巧

html:


    Box 1
    Box 2
    Box 3

css:

.box-set :before,.box-set:after{
    content:"";
    display: table;
}
.box-set:after{
    clear: both;
}
.box-set{
    background-color: #e8aaa9;
     /*在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發(fā)父元素的hasLayout的機制。*/
    *zoom: 1;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

我的理解：

在css中使用before和after實現(xiàn)了在不影響DOM結(jié)構(gòu)的情況下插入元素，彌補了方法一的不足，具體實現(xiàn)特性和方法一有異曲同工之處。

評價：

這是最優(yōu)的清除浮動的方案。

參考資料：

HTML和CSS高級指南之二——定位詳解