关于position:absolute和float之脱离文档流

最新推荐文章于 2023-05-17 17:52:05 发布
最新推荐文章于 2023-05-17 17:52:05 发布
阅读量4.8k 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyunhe/article/details/49183101
版权

position:absolute和float浮动都会以某种方式将元素从文档的正常流中删除。但其还是有点不同：float元素还是会影响布局，它对文档的其余部分还是会有影响；而绝对定位的元素会从文档流中完全删除，然后相对于其包含块定位。

直观的感受就是，absolute元素会遮挡其他元素，而float不会。




  1. 一个元素浮动时，其他元素会“环绕”该元素。任何元素都可以浮动，而且不管什么元素浮动后都会生成一个块级框。
  2. 说明absolute的元素已经完全脱离文档流，可以覆盖其他元素或被其他元素覆盖。。

small猪猪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详细分析css float 属性以及position:absolute 的区别
10-25
相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个...
脱离文档流特点之absolute
CodePrincess的博客
03-28 233
脱离文档流是指，该元素脱离了文档中。有两个结果：不再占据默认分配的空间,（导致父元素高度塌陷）它下面的元素会上去补位。但是一般来说脱离文档流分为两种。
css中如何解决绝对定位元素被遮挡的问题
最新发布
kjl536566的博客
05-17 3719
z-index:1;/*这个值只要比下面div的z-index值高就行*/"></p><p>　　<p style="position:absolute;绝对定位元素即使z-index值很高，如果其设置相对定位的父元素没有设置z-index值的话，其可能（这种可能性当然是布局存在遮盖的时候）会被后面设置了相对定位的元素遮挡（即使后面的相对定位的元素没有设置z-index值）；
day11定位
weixin_58459702的博客
07-25 1003
day11定位
position:absolute会使元素脱离文档流
weixin_34236869的博客
10-20 2906
position:absolute会使元素脱离文档流 当元素设置position:absolute时，会脱离正常文档流，后面元素会忽略该元素－》覆盖 可以给元素设置min-height解决 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ postion属性定义了一个元...
绝对定位（会脱离文档流）—— position: absolute
weixin_48796690的博客
10-09 597
绝对定位
ie6下position：absolute不显示问题解决方法
09-25
position：absolute属性在其他浏览器中都是正常的，但惟独在ie6下有问题，下面是经过测试可行的解决方法
li标签的position:absolute与relative案例应用
12-13
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...
css position: absolute、relative详解
10-30
今天在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。
利用float和absolute绝对定位脱离文档流的区别
wuliuqi62的博客
09-26 482
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 float脱离文档流：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 绝对定位absolute脱离文档流：使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 这个博主写的形象易懂，可以参考：https://www.zhihu.com/question/24529373/answer/29135021 ...
html position:absolute脱离文档流解决方法-1
ceiba_的博客
09-06 7671
html position:absolute脱离文档流解决方法-1
position：absolute 脱离文档流的真实含义
MR_HONDA的博客
10-13 2932
position:absolute 是脱离正常的文档流（的显示方法），而不是真正的脱离了文档流 疑问 实验 分析 结论 疑问？在慕课网jQuery可见性分析的课程中，有人不理解，我解释了下： 如果元素不在文档流，肯定是不可见的； 如果在文档流，就能够被jq识别，但这样都是肉眼不可见而已（上述六种方法）； 六种方法中，其中设置透明度属性为0，visibility属性为
脱离文档流之 float 和 position:absolute的区别
加油~么么哒~~
02-20 6197
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 脱离文档流的元素有个标志：没有实际高度。 脱离文档流的元素都
float:left不完全脱离，position:absolute:完全脱离（文档流，文本流，浮动元素）
爱码喵的博客
09-04 2028
可理解为文档流在最下一层，文本流和浮动元素在上同一层，故元素浮动后，后面的元素内的文字不会覆盖到浮动元素上来，而是环绕 &amp;amp;amp;lt;style type=&amp;amp;quot;text/css&amp;amp;quot;&amp;amp;amp;gt; .wrap{ width:200px; border:1px solid red; } .
float和position:absolute脱离文本流的区别
paediatrician的博客
09-19 6197
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行； CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 　　而对于使用absolute p
定位absolute、relative与浮动float的区别及脱离文档流
lyn1772671980的博客
04-03 2735
position取值absolute、relative与浮动float三者的区别属性是否脱离文档流是否占位是否影响周围元素在文档流中的位置relative否是否absolute是否否float是否是所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。...
position定位
weixin_43795084的博客
12-02 189
1.static(没有定位，不能偏移，也就是left等不生效) 所有的元素如果不进行定位，默认都为static 2.absloute（绝对定位） 设置为absolute，它需要向上找一个定位的父元素（也就是被设置了除static以外的值）为基准来定位， 如果没有，则就会以浏览器窗口为基准定位。 3.relative(相对定位) 相对的意思就是相对于其正常的位置(也就是为static)的时候，以它为基准，进行偏移 fixed（绝对定位） 以浏览器窗口为基准进行定位 inherit(继承)
绝对定位absolute、相对定位relative（脱离文档流）
Shiny0815的博客
11-26 5550
1、脱离文档流，：父元素高度不再包含文档流高度 position：absolute 子元素 position：relative 父元素， 子元素相对于祖先中的第一个relative定位，用...
position：absolute怎么解决浮动问题，怎么让父级的高度可以影响后面的块计盒子
05-13
当一个元素的 position 属性设置为 absolute 时，它会脱离文档流并且不再占据原来的空间。因此，它不会影响其他元素的布局，包括父元素的高度计算。 为了让父元素的高度可以影响后面的块级盒子，可以使用以下方法：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值