关于float的一些介绍

10、css布局
 1、默认按文档流的顺序
 2、浮动布局方式float:none/right/left;
 浮动是将块元素的霸道属性独占一行的行为取消，允许别人与其一行，即将这个块从原来的文档流模式中分离出来，它后面的对象就视它不存在。（float:left;在IE6、7中会出现兼容性问题）
 浮动浮动，先浮后动
 浮动之后会对父元素或者后面的元素产生影响：
  要清除对父元素或者后面的元素的影响clear:none/left/right/both
 当父元素没有指定高度时，并且它的子元素有浮动时，父元素的高度不会增加
 清除浮动的方法：
 1、额外标签法（会增加代码量）
  最简单的一种，W3C建议在容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素
 <div id="main">
  <div id="left">左盒子</div>
  <div id="right">右盒子</div>
  <div class="clear"></div><!--增加一个空盒子-->
 </div>
 <div id="footer">底部</div>
 2、给父元素加overflow的方法
 通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现
 overflow:hidden;zoom:1;position:relative;
 ps:css溢出处理
 overflow:visible(默认值，不剪切内容也不添加滚动条)，auto(在必须的时候对象内容才会背裁剪或显示滚动条)，hidden(不显示超过对象尺寸的内容)，scroll(总是显示滚动条)
 3、利用伪对象after方法
  定义一个类，使用为对象after,控制浮动元素影响
 网上最流行的清除浮动代码
 .clearFix:after{
  clear:both;
  display:block;
  visibility:hidden;隐藏
  height:0;
  line-height:0;
  content:".";
 }
 .clearFix{zoom:1};/*解决IE6/7高度自适应兼容问题*/
 3、定位布局方式
 position:static(静态定位，默认值),
absolute(绝对定位,将对象从文档流中分离出来，通过设置left/right/top/bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父级对象，则依据body对象)，
relative(相对定位，对象不从文档流中分离，通过设置left/right/top/bottom四个方向相对于自身位置进行相对定位)
 当我们想要用绝对定位时，必须要有两个条件
 1、必须给父元素加定位属性，一般建议使用position:relative
 2、给子元素加绝对定位position:absolute;同时要加方向属性
 相对定位与绝对定位区别
 绝对定位是以父元素为基准点进行定位--会脱离文档流
 相对定位是根据其自身为基准点进行定位--离开原位置，但还占着原来的空间
 h1{font-size:1em;}
 IE6双倍边距问题margin-left:100px;float:left;
 修改时只需加上diaplay:inline;