您正遇到浮點(diǎn)錯(cuò)誤(但我不確定它在技術(shù)上是否是一個(gè)錯(cuò)誤,因?yàn)橛卸嗌贋g覽器顯示了這種行為)。下面是正在發(fā)生的事情:
在正常情況下,假設(shè)未設(shè)置顯式高度,塊級(jí)元素(如div)將根據(jù)其內(nèi)容設(shè)置其高度。父div的底部將擴(kuò)展到最后一個(gè)元素之外。不幸的是,浮動(dòng)元素阻止父元素在確定其高度時(shí)考慮到浮動(dòng)元素。這意味著,如果最后一個(gè)元素被浮動(dòng),它將不會(huì)像普通元素那樣“拉伸”父元素。
清清
有兩種常見的方法來解決這個(gè)問題。第一種方法是添加一個(gè)“清除”元素,即浮動(dòng)元素下面的另一個(gè)元素,它將迫使父元素拉伸。因此,添加以下html作為最后一個(gè)子程序:
<div style="clear:both"></div>
它不應(yīng)該是可見的,通過使用CLEAR:兩種方法,您都要確保它不會(huì)坐在浮動(dòng)元素的旁邊,而是在它之后。
溢出:
第二種方法是更改父元素的CSS,使溢出不再是“可見的”,這是大多數(shù)人(我認(rèn)為)喜歡的方法。因此,將溢出設(shè)置為“隱藏”將迫使父級(jí)擴(kuò)展到浮動(dòng)子節(jié)點(diǎn)的底部之外。當(dāng)然,只有在沒有為父級(jí)設(shè)置高度的情況下,這才是正確的。
就像我說的,第二種方法是首選的,因?yàn)樗恍枰驑?biāo)記中添加語義上無意義的元素,但有時(shí)需要overflow
要使其可見,在這種情況下添加一個(gè)清除元素是完全可以接受的。