float与absolute脱离文档流的区别

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

.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 class="firstdiv">
     这是第一个DIV
  </div>
  <div class="seconddiv">
     这是第二个DIV
  </div>

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

图片描述

图片描述

图片描述

对于使用absolute position脱离文档流的元素,其余盒子与其余盒子内的文本都会无视它。
例如:将上例中float:left改成position: absolute。能够看到,第二个div的文字亦被第一个div的文字给覆盖了
图片描述调试

相关文章
相关标签/搜索