1. 盒模型概述

页面上的每个元素被看做矩形，这个框由外边距，边框，内边距，内容组成。width和height指的是内容区域的宽高。

在ie的早期版本包括ie6中使用自己的非标准盒模型。width不再是内容的高度而是边框，内边距，内容的宽相加。

2. 外边距叠加

当一个元素出现在另一个元素的上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。

当一个元素包含在另一个元素时也会发生叠加

• 外边距叠加初看有点奇怪，但它是有意义的如：

  
  

3. 可视化格式模型

css有三种基本定位机制：普通流，浮动和绝对定位。
块集元素从上到下一个个排列。
行内框在一行水平排列，可以通过水平内边距，边框，外边距调整水平间距，垂直内边距，边框，外边距不影响行内框的高度可以通过设置行高增加（line-height）

4. 浮动的清除

浮动的元素会脱离文档
4.1. 添加clear div(会添加许多空div)

.clear{
 clear:both;
}
<div class='clear'></div>

4.2. 将父元素也浮动（影响后面的布局）
4.3. 应用overflow
应用值为hidden或auto的overflow属性有一个副作用，会自动的清理包含的任何浮动。

.clear{
overflow:hidden;
}
.new img{
float:left;
}
.new p{
float:right;
}
<div class='new clear'>
<img src='pic.jpg'/>
<p>some text</p>
</div>

4.4. 借助：after

.clear:after{
content:'.';
height:0;
dispaly:block;
overflow:hidden;
clear:both;
}

在ie6和更低版本不起作用。
可以使用

小结

主要学了盒式模型，margin叠加，清除浮动