HTML | DOM 样式 cssFloat 属性(1)

📌 相关文章

📜 HTML | DOM 样式 cssFloat 属性(1)

📅 最后修改于: 2023-12-03 15:01:12.778000 🧑 作者: Mango

HTML | DOM 样式 cssFloat 属性

在 HTML | DOM 中，cssFloat 属性用于设置一个元素的浮动方向（左、右、无）。

语法

element.style.cssFloat = "left|right|none";

某些浏览器不支持 "cssFloat" 属性，而是支持 "styleFloat" 属性。

element.style.styleFloat = "left|right|none";

属性值

left: 元素浮动到左侧。
right: 元素浮动到右侧。
none: 元素不浮动，即 static 位置属性。

实例

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cssFloat 属性</title>
<style>
.div1 {
  float:left;
  background-color:#99c2ff;
}
.div2 {
  float:right;
  background-color:#ff9966;
}
</style>
</head>

<body>

<h2>使用 cssFloat 属性将两个 div 元素向左和向右浮动</h2>

<div class="div1">This is div1 - 一个左浮动的 div 元素。</div>
<div class="div2">This is div2 - 一个右浮动的 div 元素。</div>

</body>
</html>

输出结果：

使用 cssFloat 属性将两个 div 元素向左和向右浮动

This is div1 - 一个左浮动的 div 元素。

This is div2 - 一个右浮动的 div 元素。

注意事项

在 Firefox 中，元素浮动的方向必须指定为 "left" 或 "right"，而不能设置为 "start" 或 "end"。
在 Internet Explorer 中，不能将 "display: inline;" 与浮动元素一起使用。
可以使用万能选择器来清除浮动。例如，"div" 元素后添加一个空元素、或添加清除浮动的 CSS 样式：

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}