关于浮动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已经完全放弃了自己的所有一切，成为了天空的一朵云彩。

转载于:https://www.cnblogs.com/Arther-J/p/5380085.html