今天在做兩欄布局的自適應(yīng)時(左邊定義寬度,高度自適應(yīng),右邊高度和寬度都自適應(yīng)),左欄定義了左浮動,右欄沒有定義浮動,只是采用外補丁的左邊距來定位,以前只是知道左邊要浮動,右邊非浮動時兩個層之間就會出現(xiàn)這個3px bug,結(jié)果發(fā)現(xiàn)那個3px bug沒有出現(xiàn)(這時右欄沒有定義寬度),所以就調(diào)試了調(diào)試,看看哪種情況下3px的bug會出現(xiàn),便有了以下結(jié)論:
產(chǎn)生條件:當(dāng)一個浮動元素相鄰的非浮動元素沒有指定具體的高度或者寬度時,非浮動元素中的內(nèi)容會和浮動元素的邊界產(chǎn)生3px的空隙,這個空隙只沿著浮動元素顯示,當(dāng)浮動終止時,文本就恢復(fù)正常了,如果非浮動元素指定具體的寬度或者高度,這個時候非浮動元素和浮動元素就出現(xiàn)了3px的空隙