css float属性用法问题 css中float换行问题怎么办?

发布时间:2020-12-20编辑:脚本学堂
css float属性的用法,通过实例介绍了float属性的使用方法,float属性与clear属性相结合的例子,供大家学习参考。

一、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>