定位 position
定位是一个有点复杂的过程，其中的规则基本上靠记忆是记不住的，用到的时候，打开浏览器调试就好。
简单说几句基础的，这几句话还是能记住的。
如果一个元素没有指定定位方式，那么他是默认定位，static；
如果一个元素指定为相对定位方式（relative），那么他将紧邻着上一兄弟元素布局布局定位，top和left值无效。
margin值有效。
如果一个元素指定为绝对定位方式（absolute），那么他将相对于父级包含快布局定位。至于什么是包含快，待会解释。
如果一个元素指定为固定定位方式（fixed），那么他将相对于页面可视区域定位。
所谓包含块，用一句话来解释，就是在文档结构中按照父级层级一级一级往上找，直到第一个定位方式不是static的容器。
比如：
浮动 float
浮动也是有一堆规则的。说起来又是连篇累牍的1234abcd。个人意见，没必要去理会那么多，理解以下几句就行。
1.页面上浮动的元素，方向保持一致，不要这个是左，那个是右。
一般情况下，尽可能不要使用float。
如果使用，尽可能保持方向一致。个人习惯是都用float:left。
这其中的规矩真不是一句话两句话能讲清楚的。
本人虽工作时间不长，但遇到不少次因为浮动而“闹鬼”的情况。
2.浮动的元素将从文档流中删除，其高度和宽度也将不在文档中占位。
比如：
在浏览器里看到的是这样的。
定位是一个有点复杂的过程，其中的规则基本上靠记忆是记不住的，用到的时候，打开浏览器调试就好。
简单说几句基础的，这几句话还是能记住的。
如果一个元素没有指定定位方式，那么他是默认定位，static；
如果一个元素指定为相对定位方式（relative），那么他将紧邻着上一兄弟元素布局布局定位，top和left值无效。
margin值有效。
如果一个元素指定为绝对定位方式（absolute），那么他将相对于父级包含快布局定位。至于什么是包含快，待会解释。
如果一个元素指定为固定定位方式（fixed），那么他将相对于页面可视区域定位。
所谓包含块，用一句话来解释，就是在文档结构中按照父级层级一级一级往上找，直到第一个定位方式不是static的容器。
比如：
<div id="1" style="position:fixed;" > <div id="2" > <div id="3" style="position:absolute;" > </div> </div> </div>
id值为3的div将相对于id值为1的div进行定位布局。
浮动 float
浮动也是有一堆规则的。说起来又是连篇累牍的1234abcd。个人意见，没必要去理会那么多，理解以下几句就行。
1.页面上浮动的元素，方向保持一致，不要这个是左，那个是右。
一般情况下，尽可能不要使用float。
如果使用，尽可能保持方向一致。个人习惯是都用float:left。
这其中的规矩真不是一句话两句话能讲清楚的。
本人虽工作时间不长，但遇到不少次因为浮动而“闹鬼”的情况。
2.浮动的元素将从文档流中删除，其高度和宽度也将不在文档中占位。
比如：
<html > <head > </head> <body > <div style="border:1px solid black;"> <p style="background: #f60;width:100px;height:100px;"> </p> </div> </body> </html>
然后，为p标签加上浮动，如下：
<html > <head > </head> <body > <div style="border:1px solid black;"> <p style="background: #f60;width:100px;height:100px;float:left;"> </p> </div> </body> </html>
在浏览器里就成了这样，div标签没了高度，上下边框挤压在一起，视觉上成了2px高的一条线。
有的地方，把这种现象叫做高度塌陷。
3.浮动的元素如果想将父级容器的高度撑起来，记得加上一个元素，清除这个元素的浮动。
还是上面的例子，改改。
<html > <head > </head> <body > <div style="border:1px solid black;"> <p style="background: #f60;width:100px;height:100px;float:left;"> </p> <div style="clear:both;"> </div> </div> </body> </html>
视觉上看起来效果和最开始一样了。
4.浮动的功能是破坏和重组。
什么意思呢？简单说还是那句话，浮动的元素将从文档结构中删除，然后重新计算视觉效果。
有什么好处呢？个人见识浅陋，只能说出来2点。
a> 简单快速地实现文字坏绕效果。比如：
<div style="border:1px solid black;width:200px;"> <p> <span style="background: #f60;width:100px;height:100px;float:left;"> </span> 正宗好凉茶正宗好声音欢迎收看由凉茶领导品牌加多宝为您冠名的加多宝凉茶中国好声音喝启力添动力娃哈哈启力精神保健品为中国好声音加油。本届中国好声音当中四位导师最得意的门生将踏上娃哈哈启力音乐梦想之旅。 </p> </div>
注意，这里由于文字的高度已经将div高度撑起来，视觉上不再需要一个“clear:both”的元素撑起高度。
b> 浏览器适应。
试一下下面的效果
<html > <head lang="en"> <style> li{ width:150px; height:150px; background: #000; float: left; margin: 10px; } </style> </head> <body > <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
在浏览器里面查看的时候别忘了拖动浏览器边框，调整浏览器宽度看看有什么效果。
虽然这么玩不太推荐，但web2.0时代这是常用的一种手段。
why？能解决屏幕分辨率不一致的问题啊。
大分辨率上一行显示多一点，小分辨率上显示少一点。
那个时代的网页大多居中，两边留白，典型的就是QQ空间。why？解决分辨率问题啊。。。
大屏幕上两边留白就多一点，小屏幕上两边留白就少一点。
在html5的时代，可以用box属性更好地实现这种效果，有兴趣者自行百度。
虽然这么玩不太推荐，但web2.0时代这是常用的一种手段。
why？能解决屏幕分辨率不一致的问题啊。
大分辨率上一行显示多一点，小分辨率上显示少一点。
那个时代的网页大多居中，两边留白，典型的就是QQ空间。why？解决分辨率问题啊。。。
大屏幕上两边留白就多一点，小屏幕上两边留白就少一点。
在html5的时代，可以用box属性更好地实现这种效果，有兴趣者自行百度。