关于css 中float的一些粗浅见解 _HTML/CSS

关于css 中float的一些浅显见解
CSS float 属性
在 CSS 中，我们通过 float 属性实现元素的浮动。

float的一些使用

博客布局形式

效果图如下：

 参考代码如下：

  <style>
     body
    {
       margin-left:0,100px;
     }
    div
	{
	  width:200px;
	  height:200px;
	  background:blue;
	}
    #left
	{
	  float:left;
	}
	#right
	{
	  float:right;
	}
	#footer
	{
	  margin:0 auto;
	  width:800px;
	  height:50px;
	  background:red;
	  clear:both;
	}
  </style>
 </head>
 <body bgcolor="gray">
     <div id="left"></div>
     <div id="right"></div>
     <div id="footer"></div>
 </body>

首页布局

  <style type="text/css">
    #header,#main,#footer
    {
       width:800px;
	   margin:0 auto;
    }
    #header
    {  
       height:100px;
	   background:blue;
    }
	#left,#mid,#right
	{
	    height:300px;
	   float:left;
	}
	#left,#right
	{
	    width:150px;
	}
	#left
	{
	   height:200px;  
	   background:pink;
	}
	#mid
	{
	   width:500px;
	   background:green;
	}

	#right
	{
	   background:gold;
	}


	#main
	{
	   background:brown;
	}
	#footer
	{
	  clear:both;
	  height:100px;
	  background:aqua;
	}
	.clear
	{
	  clear:both;
	}
  </style>
 </head>
 <body>
    <div id="header">头</div>
	<div id="main">
        <div id="left">左</div>
	    <div id="mid">中</div>
	    <div id="right">右</div>
		<div class="clear"></div>
	</div>
	<div id="footer">尾</div>
 </body>

css 的一些注意事项

当有一个块有父块，子类有浮动，而父亲没有设置高度时，可能会出现父类的某些设置不生效，如background，

解决办法就是去掉浮动的影响。方法有三种

（1）通过在父类的子类的后面，加一个块<div class="clear"></div> ，设置样式.clear
{
clear:both; //w3c推荐
}

（2）设置父块的样式

overflow：hidden; 大部分浏览器都不会有问题，但是ie6没有效果，这是还需要添加一个属性zoom：1，用来解决ie6的css兼容性问题

（3）设置父块的一个新类

<style type="text/css">
    #header,#main,#footer
    {
       width:800px;
	   margin:0 auto;
    }
    #header
    {  
       height:100px;
	   background:blue;
    }
	#left,#mid,#right
	{
	    height:300px;
		float:left;
	}
	#left,#right
	{
	    width:150px;
	}
	#left
	{
	   height:200px;  
	   background:pink;
	}
	#mid
	{
	   width:500px;
	   background:green;
	}

	#right
	{
	   background:gold;
	}


	#main
	{
	   background:brown;
	}
	#footer
	{
	  clear:both;
	  height:100px;
	  background:aqua;
	}
	.clearFix:after
	{
	  clear:both;
	  height:0;
	  display:block;
	  line-height:0;
	  visibility:hidden;
      content:"";
	}
	.clearFix
	{
	  zoom:1;
	}
	#zoom
	{
	    width:1000px;
	    height:1000px;
		background:blue;
	    zoom:0.1;
	}
  </style>
 </head>
 <body>
    <div id="header">头</div>
	<div id="main" class="clearFix">
        <div id="left">左</div>
	    <div id="mid">中</div>
	    <div id="right">右</div>
	</div>
	<div id="footer">尾</div>

	<div id="zoom"></div>
 </body>

这种方法，比较常用。

又是float在某些浏览器里面还会出现一些特别的效果

如在ie6中设置了margin和float 就会出现双倍的margin边距，解决方法就是在div里面添加一个display:inline;

  <style type="text/css">
     body,div
	 {
	        margin:0;
		padding:0;
	 }
	 div
	 {
	       width:200px;
		height:200px;
                background:gold;
		margin:0 0 0 100px;
		float:left;
		display:inline;//这个是用来解决双倍边距的
	 }
  </style>
 </head>
 <body bgcolor="gray">
  <div></div>
 </body>

css精灵效果

css精灵实现，普通情况下，显示登录，鼠标移动上时，显示注册效果。

需要准备一张这样的图片，这样的

     <style>
               #last a
		{
		        width:102px;
			height:42px;
		        background-image:url('img/2013-10-08_154717.png') ;
			display:block;
			//border:1px solid  red;
		}
		#last a:hover//伪类
		{
		       background-position:102px -42px;
		}
       </style>

       <body>
                <div id="last">
                    <a href="#"></a>
                 </div>
        </body>

附赠部分

绝对定位的使用

相对布局：某个东西设置成相对布局，这个东西的位置不会被他后面的元素占据，这个位置会变成空白

绝对布局：某个东西设置成绝对布局，这个东西的位置会被他后面的元素占据。

要实现如下的效果

子类设置了绝对布局，父类需要设置成相对布局，才能在父类里面显示成这个效果。

<style type="text/css">
    body
    {
	   margin:0;
	   padding:0;
    }


    #header,#main
    {
            width:200px;
	    height:150px;
	  
    }
    #header
    {  
	    background:blue;
    }
    #main
    {
	    position:absolute;//子类设置了绝对布局
	    top:150px;
	    left:200px;
	    background:brown;
     }
    #footer

    {
	    background:aqua;
	    width:300px;
	    height:300px;

    }
    #all
    {  
             width:600px;
	     height:450px;
	     margin:200px  auto;


	     border:1px solid;
             position:relative;//父类需要设置这个
	    font-size:18px;
	    font-weight: bold;
	}
  </style>
 </head>
 <body>
   <div id="all">
    <div id="header">1</div>
	<div id="main">
       2
	</div>
	<div id="footer">3</div>
  </div>
 </body>