SOURCE

<div>
  <h2>文档流-行内元素</h2>
  <div>
    我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章<span class="inline-margin">我是一大堆文章</span>我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章
  </div>
</div>
<div>
  <h2>文档流-块元素</h2>
  <div>
    我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章我是一大堆文章
    <div class="box">
      我是个盒子
    </div>
     我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素我是后面的元素
  </div>
</div>

.inline-margin {
  color: #eee;
  margin-left: -50px;
  background: rgba(0, 0, 0, 0.1)
}


.box {
  height: 50px;
  width: 50px;
  background: blue;
  margin-top: -25px;
  margin-left: -25px;
}