可视化格式模型

1.空白边叠加
只有普通文档流中块框的垂直空白边才会发生空白边叠加。行内框、浮动框或绝对定位框之间的空白边不会叠加。

2.相对定位
无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

3.绝对定位

4.浮动
行框和清理
/**清理方法一**/
.news{background-color:grey; border:1px solid red;}
.news img{float:left:}
.news p{float:right;}
.clear{clear:both;}

<div class="news">
  <img src="news-pic.jpg" />
  <p>Some text</p>
  <div class="clear"></div>
</div>

/**清理方法二**/
.news{background-color:grey; border:1px solid red; float:left;}
.news img{float:left:}
.news p{float:right;}

<div class="news">
  <img src="news-pic.jpg" />
  <p>Some text</p>
</div>

/**清理方法三--结合使用：after伪类和内容声明在指定的现有内容的末尾添加新的内容。**/
.clear:after{content:"."; height:0; visibility:hidden; display:block; clear:both;}