Thuộc tính float trong CSS

Thuộc tính float

Thuộc tính float được sử dụng để thay đổi vị trí của phần tử trong luồng dàn trang, dàn phần tử thông thường (luồng dàn phần tử trong browser khi không dùng CSS hay CSS nhận các giá trị mặc định). Thuộc tính này sẽ đẩy phần tử trôi về trái hoặc phải của phẩn tử chứa.

Cú pháp:

float: left | right | none | inherit;

• left: phần tử được trôi về phía bên trái. Luồng nội dung thông thường sẽ giữ ở bên phải, bắt đầu ở phần đỉnh của phần tử. Luồng nội dung xung quanh box thay đổi tùy thuộc vào giá trị của thuộc tính clear .
• left: phần tử được trôi về phía bên phải
• none: phần tử không bị đẩy về phía nào, vị trí của nó theo luồng dựng thông thường.
• inherit: giá trị float kế thừa từ phần tử cha.

<style>
    .imgright {
        float: right;
        background: #000000BF;
        width: 150px !important;
        height: auto;
        margin: 10px;
    }
</style>

<p>
    Đoạn văn này có một hình ảnh:
    <img src="https://xuanthulab.net/public/img/logo.png" class="imgright" />
    có thể thiết lập nó trôi về bên phải với <strong>float: right;</strong>, 
    bên trái với <strong>float: left;</strong>
    hay được sắp xếp theo luồng mặc định với <strong>float: none;</strong>.
    Thuộc tính float thiết lập trôi phần tử theo phương ngang về trái hoặc phải chứ không
    thể thiết lập trôi theo phương đứng lên trên, xuống dưới.
    Nếu có một vài phần tử cùng trôi theo nhau, nó sẽ nối đuôi nhau 
    (về trái hoặc về phải) nếu đủ chỗ để hiện thị phần tử.
</p>

Ảnh hưởng float đến chiều cao phần tử chứa

Khi một phần tử là float (right hoặc left), thì chiều cao phần tử chứa nó thu gọn sao cho vừa các nội dung còn lại (không float), chiều cao phần tử float không tác động gì trong tính toán chiều cao phần tử chứa. Như trường hợp phần tử chứa chỉ chứa bên trong nó các phần tủ float thì chiều cao của nó là không.

<div style="border: 1px dotted black;">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    <div style="margin: 5px; width: 100px; height: 50px; background: hotpink; float: right;">
        float: right;
    </div>
    Đây là nội dung trong phần tử cha
</div>

Kỹ thuật với clear để loại bỏ ảnh hưởng float đến chiều cao

Tính chất này đôi khi gây ra những hiệu ứng phụ không mong muốn, phần tử float cao vượt quá kích thước phần tử cha, dẫn đến chiếm chỗ một cách không mong muốn cho các phần tử tiếp theo sau phần tử cha.

Một ví dụ như sau:

<div style="border: 1px dotted black;">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ nhất
</div>
<div style="border: 1px dotted red;">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ hai
</div>

Ví dụ cho thấy phần tử float không tác động đến chiều cao phần tử chứa thứ nhất, chiều cao phần tử chứa thứ nhất không bao bọc hết phần tử float, phần tử float tràn xuống dưới dẫn tới chiếm chỗ phần tử chứa thứ hai, nó làm ảnh hưởng luôn tới luồng trình bày phần tử chứa thứ hai này.

Để khắc phục tình trạng này có thể dùng kỹ thuật xóa bỏ float trong phần tử chứa với thuộc tính clear. Xóa bỏ ảnh hưởng float sau phần tử float và trước khi kết thúc phần tử chứa.

Cách hay dùng đó là thêm một phần tử block <div> có css clear: both; vào cuối của phần tử chứa, phần tử đó dạng

<div style="clear:both;"></div>

Mọi người cũng hay tạo ra một class css có tên clearfix để áp dụng cho thuận tiện:

.clearfix {
    clear: both;
}

Ví dụ trên viết lại:

<style>
    .clearfix {
        clear: both;
    }
</style>

<div style="border: 1px dotted black;">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ nhất.
    <div class="clearfix"></div>
</div>
<div style="border: 1px dotted red;">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ hai
</div>

Phần tử chứa thứ nhất đã có chiều cao bao bọc hết phần tử float.

Kỹ thuật với :after để loại bỏ ảnh hưởng float đến chiều cao

Kỹ thuật này là đưa thuộc tính clear vào chính thành phần của phần tử chứa, đó là pseudo :after, lúc đó bạn không phải chèn thêm phần tử vào phần tử chứa, mà bản thân phần tử chứa sẽ tự sinh ra ở cuối thành phần :after có thuộc tính clear. Ví dụ, class có tên clearafter

.clearafter:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

Ví dụ trên có thể viết:

<style>
    .clearafter:after {
        content: ".";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
</style>

<div style="border: 1px dotted black;"; class="clearafter">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ nhất.
</div>
<div style="border: 1px dotted red;" class="clearafter">
    <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;">
        float: left;
    </div>
    Đây là nội dung trong phần tử chứa thứ hai
</div>

Kết quả:

Bố cục với float

Thuộc tính float hữu ích để bố cụ dàn trang HTML. Hãy bắt đầu bằng cách tạo ra một khu vực chia làm hai cột, cột thứ nhất chiếm 40% cột thứ 2 là 60% phần tử chứa.

<style>
    .layout1-container {
        background: #ff5722;
        border: 1px dotted red;
        padding: 5px;
    }
    .layout1-container:after {
        content: ".";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
    .layout1-col1 {
        box-sizing: border-box;
        float: left;
        background: #ffc107;
        width: 40%;
        padding: 5px;
    }
    .layout1-col2 {
        box-sizing: border-box;
        float: left;
        background: #00bcd4;
        width: 60%;
        padding: 5px;
    }

</style>

<div class="layout1-container">
    <div class="layout1-col1">
        <p>Khối HTML1</p>
        <p>Nội dung ... </p>
        <p>Nội dung ... </p>
    </div>
    <div class="layout1-col2">
        Khối HTML2
        <p>Nội dung ... </p>
    </div>
</div>

Kết quả: