Thuộc tính float điều chỉnh vị trí trong CSS

giọt nước trôi về nơi đâu?

Thuộc tính float thường được dùng để điều chỉnh vị trí của ảnh trôi sang trái hoặc phải, khi đó text sẽ bao quanh ảnh. Ngoài ảnh thì float cũng hay được dùng trong bố cục để điều chỉnh layout của trang, ví dụ các cột bên phải được để là float: right để nó trôi về phía phải.

Giờ chúng ta sẽ đi vào các ví dụ cụ thể, đầu tiên khi không sử dụng float cho ảnh thì kết quả sẽ như thế này:

Bức ảnh ở trên không được float, bạn có thể thấy ảnh và chữ nằm trên 2 khu vực riêng biệt

Nếu sử dụng thuộc tính float cho ảnh, thì ảnh sẽ được trôi về một bên, còn chữ sẽ bao quanh nó, như ví dụ dưới đây:

Bức ảnh này được float: left; Kết quả là ảnh được trôi về bên trái và chữ được đẩy lên bao quanh ảnh. Nếu không để lề cho ảnh, chữ sẽ dính sát vào ảnh như bạn thấy.

 

Bức ảnh này được để float:right; Kết quả là ảnh được trôi về bên phải và chữ được đẩy lên, không như lần trước, cái này tôi để lề (margin) cho ảnh nên bạn sẽ không thấy chữ dính vào ảnh nữa.

Code mẫu:

img {
      float: right;
     margin-left: 10px;
}

Trong bố cục layout cho trang web như dưới đây:

Header
Left
Right
Footer

Theo đó các div có tên left được để float: left; còn div có tên right được để float: right;

Nếu một yếu tố được để là float thì các thẻ đứng đằng sau nó sẽ được nổi lên trên để bao quanh nhưng các thẻ ở trước đó thì không ảnh hưởng.

Các thông tin kỹ thuật

  • Giá trị mặc định của float: none;
  • Kế thừa tự động: không. Có nghĩa là nếu một thẻ được đặt float: left; thì các thẻ con cháu của nó không tự động có cùng thuộc tính như vậy.
  • Phiên bản CSS: thuộc tính float có ngay từ CSS1
  • Trình duyệt hỗ trợ: tất cả các trình duyệt phổ thông.

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

  • left: làm cho thẻ trôi trái.
  • right: làm cho thẻ trôi phải
  • none: thẻ không được float, đây là giá trị mặc định.
  • inherit: nếu giá trị này được dùng thẻ sẽ có giá trị float giống thẻ cha

Thuộc tính clear

Thuộc tính clear hay đi cùng float, khi bạn sử dụng thuộc tính này các thành phần bên dưới sẽ không được phép trôi lên bao quanh nữa. Ví dụ text sẽ trôi lên bao quanh ảnh được float, nhưng nếu clear thì text sẽ ở dưới ảnh.
Các giá trị của clear:
  • left: ngăn không cho trôi trái
  • right: ngăn không cho trôi phải
  • both: ngăn không cho trôi sang cả trái và phải, thường thì ta để cái này để nó khỏi trôi lên cả 2 bên luôn.
Code mẫu:
img {
float: left;
clear: both;
}

Leave a Comment