设置元素浮动的几种方式-优快云博客

本文详细解析了不同浏览器（如IE、Firefox、Chrome等）在获取元素浮动属性时使用的不同方法，包括styleFloat、cssFloat、float及getComputedStyle等。特别指出在IE9中使用'float'属性也能获取浮动状态，并列举了各浏览器对这些属性的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道获取元素的浮动属性，各浏览器中使用的属性不同。大家都知道IE中使用styleFloat，标准浏览器使用cssFloat。

<div>test</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	// IE
	div.currentStyle.styleFloat; // none
	
	// FF/Chrome/Safari/Opera
	var sty = window.getComputedStyle(div, null);
	sty.cssFloat; // none
</script>

至于为什么不直接使用float大家应该很清楚，float是ECMAScript的保留字。

看jq源码中意外发现IE中使用“float”属性在IE9下也可以获取，如下

<div>test</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	
	// IE9
	alert(div.currentStyle['float']); // none
</script>

IE6/7/8则是undefined。webkit 也支持float属性，如下

<div>test</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	
	// Chrome/Safari
	var sty = window.getComputedStyle(div, null);
	alert(sty['float']); // none
</script>

以下列举下各浏览器对float，cssFloat，styleFloat的支持情况