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>
float:
Đoạn văn này có một hình ảnh nó được thiết lập để trôi về
bên
phải
với thuộc tính CSS là float: right;
Bạn cũng nên thiết lập thuộc tính margin cho ảnh, để chữ không gần ảnh quá.
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>