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

1，float屬性

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

如圖，我們?yōu)榈谝粋€(gè)盒子第一個(gè)盒子設(shè)置了float：left屬性，他也就失去了霸道總裁獨(dú)占一行的特點(diǎn)，下面的盒子就上位。

但是我們發(fā)現(xiàn)一個(gè)問(wèn)題，如果總裁通知完全浮動(dòng)（也就是說(shuō)不在公司了），那么下面的div應(yīng)該把他的位置完全占領(lǐng)，也就是說(shuō)文字也應(yīng)該被總裁覆蓋，但是發(fā)現(xiàn)并沒(méi)有，我們得出結(jié)論，第一個(gè)div雖然浮動(dòng)，但是他原來(lái)的位置還在，緊鄰的div雖然能夠與他平起平坐，但是也不能完全騎在他頭上。并且，第一個(gè)div會(huì)隨著content的內(nèi)容的增加而width增加，從而擠占相鄰div的橫向?qū)挾取?/p>

2，position：absolute屬性

當(dāng)我們把第一個(gè)div的position屬性設(shè)置為absolute時(shí)，效果如下圖：

我擦，令人驚奇的一幕發(fā)生了，相鄰的div里面的內(nèi)容被第一個(gè)div遮蓋，這就說(shuō)明第一個(gè)div已經(jīng)完全脫離了文檔流。相鄰的div也就視他不存在，愛(ài)咋地咋地。

?

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/Arther-J/p/5380085.html

總結(jié)

以上是生活随笔為你收集整理的关于浮动float属性和position:absolute属性的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。