关于css 中float的一些粗浅见解
日期：2014-05-16 浏览次数：20855 次
关于css 中float的一些浅显见解
CSS float 属性
在 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 就会出现双
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
