CSS Float浮動
float
屬性創建浮動框,將其移動到一邊,直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
float
的可能值為:left或right或none。
- 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>varbuttons = document.getElementsByTagName("BUTTON");
for (vari = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {varelements = document.getElementsByClassName("toggle");
for (varj = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
上面的代碼呈現如下:
Clear
默認情況下,浮動元素將堆疊在一起。
clear屬性清除堆疊。
它指定浮動元素的一個或兩個邊緣必須不與另一個浮動元素的邊緣鄰接。
其可能的值為:
- left - 元素的左邊緣可能不與另一個浮動元素鄰接。
- right - 元素的右邊緣可能不與另一個浮動元素鄰接。
- both - 兩邊都不能與另一個浮動元素鄰接。
- none - 元素不被清除,并且任一邊緣可以鄰接另一個浮動元素。
以下代碼顯示了正在使用的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>varbuttons = document.getElementsByTagName("BUTTON");
for (vari = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {varelements = document.getElementsByClassName("toggle");
for (varj = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
上面的代碼呈現如下: