margin系列之bug巡演（二）

margin系列之bug巡演（二）

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/12/17/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bbug%E5%B7%A1%E6%BC%94%EF%BC%88%E4%BA%8C%EF%BC%89/

IE6/7 clear引發(fā)的margin-top bug

我知道，這是一個被談及較少的bug，但我?guī)缀蹩梢钥隙阍谟鲆娺^的同時并沒有把它當成是一個bug。

w3c關(guān)于 clear 特性的描述

設(shè)置了 clear 為非 none 值的元素，其頂部 border 邊界在垂直方向不允許出現(xiàn)在之前的浮動元素底部 margin 之上。

什么意思呢？用段代碼來闡述：

HTML

<div class="a">float:left</div>
<div class="b">clear:left</div>

CSS

.a{
    float:left;
    height:30px;
    margin:20px;
}
.b{
    clear:left;
    height:30px;
    margin-top:-30px;
}

如上代碼，你認為 .b 是否會相對自身向上偏移 30px 呢？然后蓋住 .a 底部 10px？如果你真這么猜想，那就錯了。

來看上述代碼，我們會得到什么樣的結(jié)果，如 圖一：

（圖一）

恩，你覺得這可能會是落后瀏覽器才這樣，比如IE6/7。很高興的告訴你，其實高級瀏覽器才這樣，IE6/7的表現(xiàn)會是之前你猜想的那樣，如下 圖二：

（圖二）

不論你相信與否，看個例子你就明白了 DEMO1：clear margin 猜想，你會發(fā)現(xiàn)就算將 margin-top 去掉，.b 的位置也絲毫不會改變。

為什么會這樣？

我們已經(jīng)說過設(shè)置了 clear 為非 none 值的元素其頂部 border 邊界不允許出現(xiàn)在之前浮動元素的底部margin邊界之上。也就是說必須在垂直方向上遞次堆疊卻不能重合。

所以說高級瀏覽器是遵循w3c規(guī)范的，而IE6/7的實現(xiàn)明顯有悖該規(guī)則。
` 雖然擁有clear特性的元素其border`
頂部邊界不允許超越之前浮動元素的底部margin邊界之上，但是其margin可以和之前浮動元素的任何區(qū)域重合。我們稍微改下之前代碼：

HTML

<div class="a">float:left</div>
<div class="b">clear:left</div>

CSS

.a{
    float:left;
    height:30px;
    margin:20px;
}
.b{
    clear:left;
    height:30px;
    margin-top:50px;
}

我們將 .b 的 margin-top 修改為一個正值，能得到如下 圖三：