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