CSS Float: Định vị phần tử trôi nổi

Thuộc tính float trong CSS được sử dụng để định vị hoặc định dạng một hộp (box) hoặc nội dung. Lập trình viên có thể định vị phần tử về bên trái hoặc bên phải bằng CSS float.

Các giá trị của thuộc tính float

• left — Phần tử trôi nổi về bên trái của container chứa nó
• right — Phần tử trôi nổi về bên phải của container chứa nó
• none — Phần tử không trôi nổi. Đây là giá trị mặc định
• inherit — Phần tử kế thừa giá trị float từ phần tử cha

Ví dụ minh họa

Dưới đây là ví dụ minh họa thuộc tính CSS Float:

<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
<style>
form {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
input[type="button"] {
    border-radius: 10px;
}
#container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}
.child {
    height: 40px;
    width: 40px;
    color: white;
    border: 4px solid black;
}
.orange { background-color: #FF8A00; }
.red { background-color: #F44336; }
.violet { background-color: #C303C3; }
.green { background-color: #4CAF50; }
.blue { background-color: #03A9F4; }
.yellow { background-color: #FEDC11; }
#left {
    display: flex;
    float: left;
}
#right {
    display: flex;
    float: right;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Float</legend>
<div id="container">
<div class="child orange"></div>
<div class="child red"></div>
<div class="child violet"></div>
<div class="child green"></div>
<div class="child blue"></div>
<div class="child yellow"></div>
</div><br>
<input type="button" value="float-->left" onclick="floatDecider('left')">
<input type="button" value="float-->right" onclick="floatDecider('right')">
<div><div id="left"></div><div id="right"></div></div>
</fieldset>
</form>
<script>
var left = document.getElementById('left');
var right = document.getElementById('right');
function floatDecider(direction) {
    var allChildren = document.getElementsByClassName('child');
    if (direction === 'left')
        left.insertAdjacentElement('beforeend', allChildren[0]);
    else
        right.insertAdjacentElement('afterbegin', allChildren[0]);
}
</script>
</body>
</html>

Kết quả

Mã trên sẽ cho ra kết quả như sau:

• Trước khi nhấn bất kỳ nút nào — các ô màu hiển thị trong container giữa
• Nhấn nút float-->left 4 lần — 4 ô đầu tiên di chuyển sang khung trái
• Nhấn nút float-->right — ô tiếp theo di chuyển sang khung phải

Lưu ý: Hình ảnh minh họa trong bài gốc đã bị loại bỏ do đường dẫn nội bộ. Bạn có thể chạy code trên trình duyệt để xem kết quả thực tế.