css学习笔记清除浮动

1-清除浮动：
就是去掉前面的对象对后面的影响

2-为什么原来一行的对象会因为窗口的变化会改变个原来的位置，出现错位？
因为他们的宽度超过窗口的宽度，解决方法是将他们放在同一个div里面，将他们包起来

3-设置一个块水平居中时，都会给这个块设置一个宽度

4****当父元素没有指定高度时，并且，它的子元素有浮动，这时候父元素的高度不会自动增加

5-CSS溢出
overflow:scroll ||hidden|| auto||visible

##########################################
6-CSS定位
position: static (默认值)||ablosute（left|right|top|bottom）||relative
ablosute:绝对定位 相对于父元素定位，如果没有父元素则相对于body定位。将对象脱离文档流
position :ablosute;
left:100px;
top:10px;

relative：相对自己的位置定位，不脱离文档流，任然占据原来的位置 
position :relative;
left:100px;
top:10px;

7-使用绝对定位的要求：
 1-必须给父元添加方向属性：一般建议使用 position：relative;
 2-给子元素加上绝对定位属性 position :relative;left:100px;top:10px;；
 同时指明方向属性
 
8- display:none ||visibility:hidden;
display:none 脱离文档流，不占据空间 block|inline| inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器 
visibility:hidden:占据位置，只是不显示 visibility : inherit | visible | collapse | hidden 
 
#########################################
清除浮动方式：

1---W3C推荐方式
在容器的末尾增加一个clear；both元素，强迫容器适应它的高度，以便装下所有的float元素

.clear{
				clear:both;
			}
<div class="main">
	<div id="mainLeft">mainLeft</div>
	<div id="mainRight"></div>
	<div class="clear"></div>
</div>
<div class="footer">ooter</div>

2--给父元素添加overflow:hidden属性
 通过设置父元素的overflow为hidden  ;zoom=1(解决IE6)
 但是如果子元素使用了定位布局，就很难实现
 overflow:hiddden;
 zoom:1;(解决IE)
 position:relative;
 *****
 使用绝对定位的要求：
 1-必须给父元添加方向属性：一般建议使用 position：relative;
 2-给子元素加上绝对定位属性 position :relative;left:100px;top:10px;；
 同时指明方向属性
 

 3-网上通用解决方式：
 在父元素上定义一个clearfix类
 .clearfix:after {
				clear: both;
				display: block;
				height: 0px;
				visibility:hidden;
				content: ".";
			}
			.clearfix{
			zoom: 1;/*j解决ie6、7兼容性问题*/
			}
 
 *********************************
 
清除浮动sina的方式：
  /* 初始化CSS */
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
        fieldset, img { border:none; }
        img{display: block;}
        address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
        ul, ol { list-style:none; }
        input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
        input::-moz-focus-inner { border:none; padding:0; }
        select, input { vertical-align:middle; }
        select, input, textarea { font-size:12px; margin:0; }
        input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
        textarea { resize:none; }
        table { border-collapse:collapse; }
        body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }
        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
        .clearfix { zoom:1; }
        .clearit { clear:both; height:0; font-size:0; overflow:hidden; }
        a { color:#666; text-decoration:none; }
        a:visited { color:#666; }
        a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

        .hidden{visibility:hidden;}
        /**** 链接颜色 link,visited,hover*/
        /*#333 #8D0000 #333*/
       
		overflow: hidden;清除浮动
		clear: both;
		在定义class='clearfix'
     
        /*main*/
        .main{width: 1000px;margin: 0 auto;clear: both;background-color: #fff;overflow: hidden; }