float与absolute脱离文档流的区别

itvincent 发布于2019-08-29 11:29 / 1394人阅读

摘要：对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。例如将上例中改为。可以看到，第二个的文字亦被第一个的文字给覆盖了

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。例如：

 .firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
    float: left;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  
     这是第一个DIV
  
  
     这是第二个DIV

根据chrome调试和红色边框，可以看到第二个div的背景和边框是占据了第一个DIV的空间的，但是第二个div的文本仍然为第一个DIV留出了位置。

对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
例如：将上例中float：left改为position: absolute。可以看到，第二个div的文字亦被第一个div的文字给覆盖了

GPU云服务器云服务器 java输出流的区别云文档与服务器云文档与服务器连接 absoluted

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111685.html

float与absolute脱离文档流的区别

摘要：对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。例如将上例中改为。可以看到，第二个的文字亦被第一个的文字给覆盖了使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。例如： .firstdiv{ background-color:rgba(125,125,235,0.4); height:200p...

fantix 2019-08-01 15:53 评论0 收藏0
“位置”在css里的细节

摘要：在确定页面元素的准确位置时，需要细致地参考这些边。它们的位置从下到上依次是为负的定位元素。本文只介绍了一部分有关位置的细节知识，如果你也曾对这些内容有所困惑，那么希望能有所帮助。位置是个怎样的概念哎，这个元素怎么跑那里去了？回想一下，在我们觉得样式崩了，页面出bug了的时候，是不是会有相当一部分情况都可以描述成上面这句话呢？我们在写css的时候，就会经常考虑位置这个事。理念就是...

Cristalven 2019-08-28 18:20 评论0 收藏0
CSS 3-浮动、定位

摘要：让元素脱离文档流有三种方法浮动绝对定位固定定位元素脱离文档流定位的三种布局机制文档流浮动定位。定位元素会脱离文档流。浮动的元素是先站住自己所在文档流的位置，然后左右浮动。文档流文档流是一种默认定位方式，在文档流中元素框的位置由元素在html中的位置决定，文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行，自上而下排列；内联...

TalkingData 2019-08-29 15:32 评论0 收藏0
【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
html和css常见的一些问题总结

摘要：至于说，，，属性是脱离文档流的，这个估计也是我们刚开始用得最多的，最方便的一个，同时也会给我们带来许多问题，这一次你会发现与前面的，有相同的地方，都是覆盖，不同的是，里文字被挤出来，这也是之前主要是用来做文字环绕效果有关。 html 标签一般在html有块级元素和行级元素，主要的块级元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

EddieChan 2019-08-30 12:53 评论0 收藏0