关于浮动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

关于浮动float属性和position:absolute属性的区别相关推荐

position absolute 与 relative 区别
position absolute 与 relative 区别 absolute 绝对定位元素可以放置到页面上的任何位置 relative 相对定位会按照元素的原始位置对该元素进行移动
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS 浮动(float)与定位(position)
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{c ...
positio有哪些属性？position的属性如何使用
position的属性 position的属性有:static(默认位置),relative(相对定位),absolute(绝对定位),fixed(固定定位) 1.position的第一个属性--st ...
position:relative与position:absolute的定位区别
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
position absolute和relative区别
position:absolute这个是绝对定位: 是相对于浏览器的定位. 比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离 ...
position(五种属性，以及每个属性的特点)
1. position: relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不 ...
html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
position: absolute;_前端性能优化--transform与position
上个星期去yy语音面试,就有一个这样问题: transform与position:absolute 有什么区别? 我回家后查资料发现这道题目其实不简单啊,涉及到重排.重绘.硬件加速等网页优化的知识. ...

关于浮动float属性和position:absolute属性的区别

关于浮动float属性和position:absolute属性的区别相关推荐

最新文章

热门文章