浮動(dòng)的定義： 非IE瀏覽器下，容器不設(shè)高度且子元素浮動(dòng)時(shí)，容器高度不能被內(nèi)容撐開。 此時(shí)，內(nèi)容會(huì)溢出到容器外面而影響布局。這種現(xiàn)象被稱為浮動(dòng)（溢出）。
浮動(dòng)的工作原理：
浮動(dòng)元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）浮動(dòng)元素碰到包含它的邊框或者其他浮動(dòng)元素的邊框停留
浮動(dòng)元素可以左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)元素或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”。
浮動(dòng)元素引起的問題？
父元素的高度無法被撐開，影響與父元素同級(jí)的元素與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后若浮動(dòng)的元素不是第一個(gè)元素，則該元素之前的元素也要浮動(dòng)，否則會(huì)影響頁面的顯示結(jié)構(gòu)
清除浮動(dòng)的方式如下：
給父級(jí)div定義height屬性最后一個(gè)浮動(dòng)元素之后添加一個(gè)空的div標(biāo)簽，并添加clear:both樣式包含浮動(dòng)元素的父級(jí)標(biāo)簽添加overflow:hidden或者overflow:auto使用 :after 偽元素。由于IE6-7不支持 :after，使用 zoom:1 觸發(fā) hasLayout**
京公網(wǎng)安備 11010802030320號(hào)