在CSS中使文本与基于DIV的HTML页面中的div对齐？

div {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

.clear {
  clear: both;
}

<div></div>
<p class="clear">这是一段文本。</p>

div {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

<div></div>
<p>这是一段文本。</p>

div {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

<div></div>
<p style="position: relative; top: 50px; left: 50px;">这是一段文本。</p>