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叠加，清除浮动
