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

我知道，這是一個(gè)被談及較少的bug，但我?guī)缀蹩梢钥隙阍谟鲆?jiàn)過(guò)的同時(shí)并沒(méi)有把它當(dāng)成是一個(gè)bug。

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

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

什么意思呢？用段代碼來(lái)闡述：

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;
}

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

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

（圖一）

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

（圖二）

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

為什么會(huì)這樣？

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

所以說(shuō)高級(jí)瀏覽器是遵循w3c規(guī)范的，而IE6/7的實(shí)現(xiàn)明顯有悖該規(guī)則。
` 雖然擁有clear特性的元素其border`
頂部邊界不允許超越之前浮動(dòng)元素的底部margin邊界之上，但是其margin可以和之前浮動(dòng)元素的任何區(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 修改為一個(gè)正值，能得到如下 圖三：