為什么需要清除浮動(dòng)？清除浮動(dòng)的方式？

浮動(dòng)的定義： 非 IE 瀏覽器下，容器不設(shè)高度且子元素浮動(dòng)時(shí)，容器高度不能被內(nèi)容撐開。 此時(shí)，內(nèi)容會(huì)溢出到容器外面而影響布局。這種現(xiàn)象被稱為浮動(dòng)（溢出）。

浮動(dòng)的工作原理：

1.浮動(dòng)元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）

2.浮動(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)元素引起的問題？

1.父元素的高度無(wú)法被撐開，影響與父元素同級(jí)的元素

2.與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后

3.若浮動(dòng)的元素不是第一個(gè)元素，則該元素之前的元素也要浮動(dòng)，否則會(huì)影響頁(yè)面的顯示結(jié)構(gòu)

清除浮動(dòng)的方式如下：

1.給父級(jí) div 定義height屬性

2.最后一個(gè)浮動(dòng)元素之后添加一個(gè)空的 div 標(biāo)簽，并添加clear:both樣式

3.包含浮動(dòng)元素的父級(jí)標(biāo)簽添加overflow:hidden或者overflow:auto

4.使用 :after 偽元素。由于 IE6-7 不支持 :after，使用 zoom:1 觸發(fā) hasLayout**