关于css 中float的一些粗浅见解-HTML教程-爱易网页

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

日期：2014-05-16　浏览次数：20720 次

关于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 就会出现双

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>