使用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的文字给覆盖了调试