一、css float属性用法问题
css定位的第二个属性---float.第一个是positon
float属性可以用于块级或者行内元素。使用了float属性的块级元素,会变成行内元素,然后进行左右漂移。
float.如果发现一行内的空间不足的话,会智能的移动到下一行。
可取值:left.right.none
复制代码 代码示例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<style>
.good {width:200px;height:200px;background-color:red;float:right;}
// div {width:400px;height:100px;background-color:blue;}
div {width:400px;height:100px;background-color:blue;float:left;}
</style>
</head>
<body>
<div>
</div>
<div class="good">1</div>
<div class="good">2</div>
<div class="good">3</div>
</body>
</html>
float的一个相关属性是clear
clear可取值为left,right,none,both.
作用是清除其左右元素的float属性,如果左右是block元素+float就变成行内元素了,清除float就比变成block元素了,会导致换行。
二、css float属性用法
css float属性
在js中用到float属性,float这种写法对IE和FF都不起作用。
修改为styleFloat发现对IE起作用了,但是在FF下却没反应,后来在改为cssFloat,FF下没问题了,IE却又不行了。
结论:
ie下:style.styleFloat
ff下:style.cssFloat
一般也可以写上style.float
一种兼容的写法:
复制代码 代码示例:
<script language="
javascript">
function changelayout()
{
document.getElementById('colleft').style.float=document.getElementById('colleft').style.float=='right'?'left':'right';
document.getElementById('colleft').style.styleFloat=document.getElementById('colleft').style.styleFloat=='right'?'left':'right'; //兼容IE
document.getElementById('colleft').style.cssFloat=document.getElementById('colleft').style.cssFloat=='right'?'left':'right'; //兼容FF
}
</script>