Thuộc tính cssFloat (tương ứng float trong CSS) dùng để thiết lập hoặc lấy căn chỉnh ngang của phần tử. Cho phép nổi trái hoặc phải.
Cú pháp
object.style.cssFloat = "left|right|none|initial|inherit"
Lưu ý: Trong JavaScript dùng cssFloat (không dùng float vì là từ khóa reserved). CSS dùng float.
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| none | Không nổi (mặc định) |
| left | Nổi sang trái nhất phần tử cha |
| right | Nổi sang phải nhất phần tử cha |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 50px;
width: 50px;
margin: 5px;
float: left;
background-color: rebeccapurple;
}
div+p {
height: 70px;
color: red;
border: 2px solid #b8860b;
}
</style>
<script>
function changeFloat() {
document.getElementById("DIV1").style.cssFloat = "right";
document.getElementById("Sample").innerHTML = "Phần tử div sẽ nổi sang phải";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Đây là đoạn văn mẫu. Dòng thứ hai. Dòng thứ ba.</p>
<p>Thay đổi float property của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeFloat()">Thay đổi Float</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu div vuông tím nổi bên trái, văn bản bao quanh bên phải. Sau khi nhấn nút, div nổi bên phải, văn bản bao quanh bên trái.
Lưu ý: Cần clear cho phần tử sau nếu không muốn bao quanh.