FLOAT概述
浮動原本是爲了實現圖片環繞的效果，現在常用來實現佈局。浮動元素的只能沿水平方向浮動，不能沿着垂直方向浮動。元素浮動後脫離原有的文檔流，直到遇到邊框和其它浮動框爲止，浮動元素之後的其後的元素將圍繞它，並佔據浮動元素騰出的位置，直到遇到邊框爲止。浮動會對浮動之後的元素產生影響，但對浮動之前的元素無影響。
浮動效果1，文字環繞，圖片環繞
由上圖可以看出浮動實現了文字環繞了首字母和圖片，首字母之後的元素均受到了影響，但對其之前的元素無影響。
2. 浮動後元素脫離文檔流
其後的元素佔據原有浮動元素的文檔流。浮動元素可能會覆蓋其後面的元素，如下圖所示
浮動前：
浮動後：
藍色的元素佔據紅色元素浮動前的位置，紅色的元素覆蓋了藍色的元素的部分內容。
3. 浮動後，父類元素會高度塌陷
由於父元素設置了高度，則子元素浮動後父類元素高度不變
父類元素未設置高度，子元素浮動後，父元素的高度由原有子元素佔據的高度變爲去除子元素高度後的高度
其中父元素的高度由原來的50+50=100px變爲了去除浮動後的100px -50px = 50px了。如果父元素只包含浮動的子元素，則會造成子元素浮動後的父元素高度爲0，所以即使此時父元素的寬度比子元素寬，但由於高度爲0，所以此時設置的背景色也無法被顯示出來，這就是所謂的高度塌陷。
4. 浮動常用來佈局，例如兩欄佈局中，將兩欄均向左或者向右浮動。如果其中有一欄定寬，則另外一欄的寬度由其下的內容決定。也可以兩個欄目均佔據一定比例的寬度。