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>
上面的代码呈现如下：
响应式 Web 设计 - 视频(Video)使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例vide...
此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。 开始hello.html!DOCTYPE htmlhtml lang="en"headmeta...
CSS 伪类 (Pseudo-classes)CSS 伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，...
