关于css 中float的一些浅显见解

来源：互联网发布：知乎我爱男保姆编辑：程序博客网时间：2024/05/18 09:52

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:800p     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  //添加了一个新类clearFix的伪类    {  clear:both;  height:0;  display:block;  line-height:0;  visibility:hidden;          content:"";    }    .clearFix    {  zoom:1;//解决ie6,7的兼容性    }    #zoom    {   width:1000px;   height:1000px;   background:blue;   zoom:0.1;    }  </style> </head> <body>    <div id="header">头</div><div id="main" class="clearFix"> //添加了一个新类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>