CSS盒子模型与初级布局定位

<h2>盒子模型</h2>
HTML的元素现实模型被称为盒子模型，任何一个在页面上显示的元素都会呈现为一个盒子形状.

盒子模型

盒子模型的几个属性: width, height, padding, margin, border。
width:盒子的宽度.
height:盒子的高度.
直接包围内容的是(padding).
内边距的边缘是边框(border).
边框以外是外边距(margin).
内边距默认是透明的，因此不会遮挡其后的任何元素,包括元素的背景。
一个盒子的总宽 = width + padding-left + padding-right + border-left + border-right.
*--

<h2>布局定位-float</h2>
布局定位最重要的四个css属性是float, clear, position和display。
float有三个值：float: left / right / none.
<h2>布局定位-clear</h2>
当我们进行浮动的时候，浮动块会高于不浮动的父级，按照正式的说法叫所在的物理位置脱离普通流。

<div id="main"> 
<div id="sidebar">我是左边栏</div> 
<div id="container">我是主容器</div>
</div>

配合上下面的CSS

#main { width: 600px; padding: 20px; background-color: #00ff00;}
#sidebar { background-color: #FF6600; float: left; width: 130px;}
#container { background-color: #FFFF33; float: right; width: 420px;}

我们就会看到这种奇怪的情况（高度塌陷）：

这时我们加一个clear的div

<div id="main"> 
<div id="sidebar">我是左边栏</div> 
<div id="container">我是主容器</div> 
<div style="clear:both;"></div>
</div>

就会显示成下面的样子了：

**-