JavaScript 教程
JavaScript 对象
jQuery 教程
JSON 教程
AngularJS 教程
Angular 2 教程
Vue.js 教程
React 教程
jQuery UI 教程
jQuery EasyUI 教程
AJAX 教程
Highcharts 教程
Google Maps API 教程
ES6 教程
TypeScript教程
ES6 标准入门Style cssFloat 属性
Style 对象
定义和用法
cssFloat 属性设置或返回元素的水平对齐方式。
语法
设置 cssFloat 属性：
Object.style.cssFloat="left|right|none|inherit"
返回 cssFloat 属性：
Object.style.cssFloat
| 值 | 描述 |
|---|---|
| left | 对象/元素浮到父元素的左边 |
| right | 对象/元素浮到父元素的右边 |
| none | 默认。对象/元素不浮动。 |
| inherit | cssFloat 属性的值从父元素继承。 |
浏览器支持
所有主要浏览器都支持 cssFloat 属性。
注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
提示和注释
注释：如果在一行中对于浮动元素而言空间太少，则这个元素会跳到下一行，这个过程会持续到有足够空间的一行为止。
实例
实例
点击两个按钮设置图像浮动到文本的左右边：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplay.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif" width="100" height="132">
<p>这是一个段落。</p>
<p>这也是一个段落。</p>
<input type="button" onclick="floatRight()" value="右浮动">
<input type="button" onclick="floatLeft()" value="左浮动">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplay.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif" width="100" height="132">
<p>这是一个段落。</p>
<p>这也是一个段落。</p>
<input type="button" onclick="floatRight()" value="右浮动">
<input type="button" onclick="floatLeft()" value="左浮动">
</body>
</html>
尝试一下 »
Style 对象