今天在做兩欄布局的自適應(yīng)時(shí)(左邊定義寬度,高度自適應(yīng),右邊高度和寬度都自適應(yīng)),左欄定義了左浮動(dòng),右欄沒(méi)有定義浮動(dòng),只是采用外補(bǔ)丁的左邊距來(lái)定位,以前只是知道左邊要浮動(dòng),右邊非浮動(dòng)時(shí)兩個(gè)層之間就會(huì)出現(xiàn)這個(gè)3px bug,結(jié)果發(fā)現(xiàn)那個(gè)3px bug沒(méi)有出現(xiàn)(這時(shí)右欄沒(méi)有定義寬度),所以就調(diào)試了調(diào)試,看看哪種情況下3px的bug會(huì)出現(xiàn),便有了以下結(jié)論:
產(chǎn)生條件:當(dāng)一個(gè)浮動(dòng)元素相鄰的非浮動(dòng)元素沒(méi)有指定具體的高度或者寬度時(shí),非浮動(dòng)元素中的內(nèi)容會(huì)和浮動(dòng)元素的邊界產(chǎn)生3px的空隙,這個(gè)空隙只沿著浮動(dòng)元素顯示,當(dāng)浮動(dòng)終止時(shí),文本就恢復(fù)正常了,如果非浮動(dòng)元素指定具體的寬度或者高度,這個(gè)時(shí)候非浮動(dòng)元素和浮動(dòng)元素就出現(xiàn)了3px的空隙
更多信息請(qǐng)查看IT技術(shù)專欄
版權(quán)所有:易賢網(wǎng)
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試