我记得之前看W3SCHOOL上的布局部分，看了之后还是很懵逼，就是不知道为啥这样的。好了，现在学到了HF里的布局和定位了，清晰了不少。
主要内容是流体布局（float）,冻结布局（frozen）,凝胶布局（jello），以及position定位知识。
流
流是浏览器在页面上拜访HTML元素所用的方法。从最上面开始，往下显示各个元素，如果遇到块元素就每个块后面换一行。
内外边距——两个元素并排&垂直时怎么算？
并排：
当两个内联元素并排放置时（只有内联元素才可并排哦，块元素会换行的），假设A的外边距是10px，B的外边距是20px，那么他俩的之间就会有30px的空间。
垂直：
当两个块元素垂直放置时，浏览器会把这两个元素共同的外边距折叠在一起，折叠的外边距高度就是其中最大的外边距高度。
嵌套：
（嵌套这块怎么折叠我有点没弄明白，mark一下，后面查资料理解。） 内联元素也有外边距——涉及到嵌套问题。
浮动布局、冻结布局、凝胶布局
浮动布局
理解：浮动元素是被块元素忽略的元素，但内联元素知道它在哪里，会围着它(整个元素盒子）转。 也就是说，内联元素可以感知到浮动元素，但块元素不可以。
使用：将要浮动元素在html里进行调整，它外边距中的的top是对于在html里上一个块元素之间的距离。
float属性，只有两个值：left,right。如下代码所示，它将一个左右下外边距为10px，宽度为420px的div，浮动到页面左边。
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 420px;
float: left;
}
当希望块元素也绕着浮动元素该怎么办呢？——使用clear. 如
clear:right;
代表这个元素右边不允许出现浮动内容。
冻结布局
将页面上所有元素都固定住，即用一个div将所有元素包裹住，并设置为宽度固定的布局叫做冻结布局，这可以避免由浮动布局带来的以下问题：1.内容栏浮动，则侧栏随着浏览器扩大会更宽。 2.侧栏浮动，则在手机，盲人阅读器上，会导致侧栏内容在页面前面。 特点：所有元素都被固定在浏览器的某个坐标上。
#allcontent{
width: 800px;
padding-top:5px;
padding-bottom:5px;
background-color: #675c47;
}
这样所有的内容都被固定为800px宽了。
凝胶布局
冻结的改进版本。 margin-left/right用auto，使之始终居中（是一种方法，但我感觉现在用的挺少的，以前的小站挺多这样的）
#allcontent{
width: 800px;
padding-top:5px;
padding-bottom:5px;
background-color: #675c47;
margin-left:auto;
margin-right:auto;
}
OK，先这么多，明天接着写定位的知识~
