有寫過浮動的人在沒有學(xué)習(xí)清除浮動的時候，都會有這樣一種體會，比如說，有兩個div，我想把它放到一行，然后選擇用浮動來達到自己想要的效果。接下來在寫正常文檔流的時候，就會發(fā)現(xiàn)出現(xiàn)問題，浮動后的正常文檔流會在浮動元素的底部顯示，浮動元素會把正常元素覆蓋掉。。。

如圖2（兩個浮動的div都是左浮動）圖4（兩個浮動的div一個是左浮動一個是右浮style="clear:right即可”)。這個bug解決后，所呈現(xiàn)的效果如浮動清除效果1/2所示。

清除浮動的方法

1.給父元素加高度

2.（1）給浮動的元素加一個兄弟空的元素，并加上樣式clear:both/cleat:left/clear right

（2）給父元素加偽類：

如：.box:after{

content:””;

display:block;

clear:both;

}

（3）給受影響的元素加樣式：clear:both/cleat:left/clear right

3.給浮動元素的父元素加上：overflow：hidden

圖1

圖2

圖3

圖4

清除浮動第一種方法1

清除浮動的效果1

清除浮動第一種方法2

清除浮動效果2