float 属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float 的可能值为：left或right或none。
以下代码显示了float属性。
<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
上面的代码呈现如下：
默认情况下，浮动元素将堆叠在一起。
clear属性清除堆叠。
它指定浮动元素的一个或两个边缘必须不与另一个浮动元素的边缘邻接。
其可能的值为：
以下代码显示了正在使用的clear属性。
<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
p.cleared {
clear: left;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle cleared">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
上面的代码呈现如下：
在下面的列表中描述了为背景设置样式的属性。background-color 设置元素的背景颜色。颜色在任何图像后面绘制。background-image ...
CSS 颜色使用CSS时，您可以指定不同方式范围内的颜色。我们可以使用预定义的颜色名称。或者我们可以为每个红色，绿色和蓝色组件...
CSS 注释注释用于解释您的代码，它们被浏览器忽略。CSS注释以“”结尾，例如：p{ color:red; text-align:center;}例子以下代码在...
CSS 语法 实例 查看 实例 1 查看 实例 2CSS 实例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需...
CSS 简介 你需要具备的知识在继续学习之前，你需要对下面的知识有基本的了解：HTML / XHTML如果你希望首先学习这些项目，请在 入...