[Tự học CSS] – Tìm hiểu về thuộc tính float trong việc thiết kế Layout

4457 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Trong bài viết này, mình sẽ giới thiệu đến các bạn một thuộc tính mới, đó là thuộc tính float. Để biết được công dụng và cách sử dụng nó như thế nào thì hãy cùng theo dõi bài viết này nhé !

Khái niệm về thuộc tính float

Thuộc tính float có tác dụng đẩy phần tử sang bên trái hoặc bên phải.

Cách sử dụng thuộc tính float

Cú pháp :

Trong đó:

  • left: đẩy phần tử sang bên trái
  • right: đẩy phần tử sang bên phải
  • none: không thiết lập thuộc tính float (mặc định)
  • inherit: kế thừa giá trị thuộc tính float của phần tử chứa nó

Ví dụ

Sử dụng thuộc tính float

Nguyên lý hoạt động của thuộc tính float

* Nguyên lý 1 :

Khi một phần tử được thiết lập thuộc tính float:

  • Nó sẽ được bắt đầu ở hàng phía trên , nếu hàng phía trên còn đủ chỗ trống để chứa nó.
  • Nó sẽ được bắt đầu ở hàng mới, nếu hàng phía trên không đủ chỗ trống để chứa nó

Lưu ý: Nếu một phần tử được thiết lập thuộc tính float mà trong khi phần tử đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được bắt đầu ở hàng mới.

* Nguyên lý 2 : 

Theo nguyên lý 1 chúng ta biết rằng: khi hàng không đủ chỗ chứa phần tử thì phần tử phải bắt đầu ở hàng mới. Tuy nhiên, cách bắt đầu như thế nào mới là quan trọng.

Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ khoảng trống để chứa nó

Ví dụ

Tắt sự ảnh hưởng của thuộc tính float

Nếu một phần tử được thiết lập thuộc tính float, trong khi phần tử nằm phía sau nó không được thiết lập thuộc tính float, thì khi đó phần tử nằm phía sau sẽ bị tác động xấu bởi thuộc tính float

Để khắc phục vấn đề này, ta thêm thuộc tính clear vào phần tử phía sau theo cú pháp:

Trong đó:

  • none: cho phép phần tử chịu sự ảnh hưởng của thuộc tính float
  • left: không bị ảnh hưởng bởi thuộc tính float left
  • right: không bị ảnh hưởng bởi thuộc tính float right
  • both: không bị ảnh hưởng bởi thuộc tính float
  • inherit: kế thừa giá trị thuộc tính clear của phần tử chứa nó

Ví dụ :

Chống tràn phần tử

Nếu một phần tử được thiết lập thuộc tính float và có kích thước lớn hơn phần tử chứa nó thì khi đó phần tử sẽ bị tràn ra khỏi phần tử chứa nó.

Ví dụ :

Để khắc phục vấn đề này, ta thêm thuộc tính overflow:auto vào phần tử chứa nó.

Ví dụ khi dùng thuộc tính overflow:auto

Lời Kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Cảm ơn các bạn đã theo dõi bài viết

 

3.7/5 - (3 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *