關于浮動float屬性和position:absolute屬性的區別

最近返回頭看了很多書籍，一直在糾結float屬性和absolute絕對定位的區別和使用的情況，給大家分享一下自己的心得和體會吧。

1，float屬性

float屬性意義是讓元素拜托獨占一行的霸道總裁，成為一個普普通通的人。比如下面這個例子

如圖，我們為第一個盒子第一個盒子設置了float：left屬性，他也就失去了霸道總裁獨占一行的特點，下面的盒子就上位。

但是我們發現一個問題，如果總裁通知完全浮動（也就是說不在公司了），那么下面的div應該把他的位置完全占領，也就是說文字也應該被總裁覆蓋，但是發現并沒有，我們得出結論，第一個div雖然浮動，但是他原來的位置還在，緊鄰的div雖然能夠與他平起平坐，但是也不能完全騎在他頭上。并且，第一個div會隨著content的內容的增加而width增加，從而擠占相鄰div的橫向寬度。

2，position：absolute屬性

當我們把第一個div的position屬性設置為absolute時，效果如下圖：

我擦，令人驚奇的一幕發生了，相鄰的div里面的內容被第一個div遮蓋，這就說明第一個div已經完全脫離了文檔流。相鄰的div也就視他不存在，愛咋地咋地。

?

?

通過上面的這個小例子，可以總結為，float屬性雖然也是漂浮，但是不是完全漂浮，他只是失去了獨占一行的屬性，但是他大小所占的位置還是存在的（不能視而不見）。

而position：absolute已經完全放棄了自己的所有一切，成為了天空的一朵云彩。