Thuộc tính float trong CSS

Thuộc tính float

Với CSS float, một phần tử có thể đẩy về trái hoặc phải, có phép các phần tử khác bám quanh nó.

Thuộc tính float thường sử dụng với ảnh, nhưng nó cũng làm việc với các phần tử khác để dàn trang. Giá trị của float là: left right none, trong đó none là mặc định.

left right là hướng mà phần tử được đẩy đi (trái, phải), none thì phần tử không trôi về trái hay phải

<style>
    .imgright {
        float: right;
    }
</style>

<p>
    <img src="https://xuanthulab.net/public/img/logo.png" 
        style="width: 200px; height: auto" class="imgright" />
    Đoạn văn này có một hình ảnh nó được thiết lập để trôi về
    bên <code>phải</code> với thuộc tính CSS là <code>float: right;</code>
    Bạn cũng nên thiết lập thuộc tính margin cho ảnh, 
    để chữ không gần ảnh quá.
</p>

Phần tử float trôi 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ử.

Thuộc tính float hữu ích để bố cụ dàn trang HTML

<div style="float: left; width:40%; height: 120px; background: #ffc107;">
    Khối HTML1
</div>

<div style="float: right; width:60%; height: 120px; background: #00bcd4;">
    Khối HTML2
</div>