什么是盒子模型？
HTML的元素现实模型被称为盒子模型，任何一个在页面上显示的元素都会呈现为一个盒子形状。
盒子模型的的最内部分是实际的内容，直接包围内容的是内边距(padding)。 内边距的边缘是边框(border)。边框以外是外边距(margin)，内边距默认是透明的，因此不会遮挡其后的任何元素,包括元素的背景。
注意：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
*{
margin:0;
padding:0;
}
以边框为界，里面的叫内边距，外面的叫外边距。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
我们设置的宽高（width, height）属性，只是在设置内容部分的宽高。（IE5，6不是这样的，好在我们现在不用考虑他们了）
一个盒子的总宽 = width + padding-left + padding-right + border-left + border-right
高度也是类似，当然实际显示的时候你还得考虑margin，但是有些浏览器里margin是会叠加的，所以还要根据上下文来考虑。
页面布局：
- 布局定位：
- 属性：布局定位最重要的四个css属性是float, clear, position和display。 再配上我们前面学会的盒子模型的几个属性width, height, padding, margin, border。
- float属性：
float有三个值：
我们把每一个元素想象成浮在水面上的冰块，用float来控制他们靠左还是靠右。让他们靠左他们就会靠到盒子的最左边了，靠右也是一样。当我们面对下面的HTML：float:right/left/none
- float属性：
- 属性：布局定位最重要的四个css属性是float, clear, position和display。 再配上我们前面学会的盒子模型的几个属性width, height, padding, margin, border。
<section>
<p>西湖，位于中华人民共和国浙江省杭州市区西面，是中国大陆首批国家重点风景名胜区和中国十大风景名胜之一。中国大陆主要的观赏性淡水湖泊之一。 西湖东靠杭州市区，其余三面环山，面积约6.39平方千米[1]，南北长约3.2千米，东西宽约2.8千米，绕湖一周近15千米。[2] 西湖平均水深2.27米， 水体容量约为1429万立方米。[3] 湖中被孤山、白堤、苏堤、杨公堤分隔，按面积大小分别为外西湖、西里湖（又称“后西湖”或“后湖”）、北里湖（又 称“里西湖”）、小南湖（又称“南湖”）及岳湖等五片水面，其中外西湖面积最大。孤山是西湖中最大的天然岛屿，苏堤、白堤越过湖面，小瀛洲、湖心亭 、阮公墩三个人工小岛鼎立于外西湖湖心，雷峰塔与保俶塔隔湖相映，由此形成了“一山、二塔、三岛、三堤、五湖”的基本格局。
</p>
</section>
设置了如下的css
img {
float: left;
}
那么现实效果则如下所示
float与父级元素的宽度相关
如下所示的代码：
<section>
</section>
//CSS
.float-right {
float: right;
}
.float-left {
float: left;
}
如果article的width足够，那么会显示成下面的样子：
如果article的宽度不够，就会显示成下面的样子：
为什么是“靠左的图片”被挤得换行了？完全是因为HTML里谁写在前面，谁就显示在上面的缘故。
- clear
当我们进行浮动的时候，浮动块会高于不浮动的父级，按照正式的说法叫所在的物理位置脱离普通流。 比如下面的HTML代码：
<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;
}
我们就会看到这种奇怪的情况（高度塌陷）：
1.这时我们加一个clear的div
<div id="main">
<div id="sidebar">我是左边栏</div>
<div id="container">我是主容器</div>
<div style="clear:both;"></div>
</div>
2.我们在父级div的css中添加下面的代码：
#main {
overflow: auto;
}
就会显示成下面的样子了：
以上就是clear最常见的用法，按照官方说法，clear属性规定元素的哪一侧不允许其他浮动元素。但是这个功能与display属性协同会产生不同的效果。 所以初学者来讲，只要记住这一种用法就好了。
