免費(fèi)AI編程助手
CSS Float浮動(dòng)
2018-06-30 11:41 更新
float 屬性創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。
float 的可能值為：left或right或none。
- left - 使左邊緣接觸包含塊的左邊緣或另一浮動(dòng)塊的右邊緣。
- right - 使右邊緣接觸包含塊的右邊緣或另一浮動(dòng)塊的左邊緣。
- none - 元素不浮動(dòng)。
以下代碼顯示了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>
上面的代碼呈現(xiàn)如下：
Clear
默認(rèn)情況下，浮動(dòng)元素將堆疊在一起。
clear屬性清除堆疊。
它指定浮動(dòng)元素的一個(gè)或兩個(gè)邊緣必須不與另一個(gè)浮動(dòng)元素的邊緣鄰接。
其可能的值為：
- left - 元素的左邊緣可能不與另一個(gè)浮動(dòng)元素鄰接。
- right - 元素的右邊緣可能不與另一個(gè)浮動(dòng)元素鄰接。
- both - 兩邊都不能與另一個(gè)浮動(dòng)元素鄰接。
- none - 元素不被清除，并且任一邊緣可以鄰接另一個(gè)浮動(dòng)元素。
以下代碼顯示了正在使用的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>
上面的代碼呈現(xiàn)如下：
以上內(nèi)容是否對(duì)您有幫助：
更多建議：