21 Nov

Thuộc tính float và clear trong css 5.00/5 (100.00%) 1 vote

Chào bạn, nay mình sẽ nói về thuộc tính float và clear trong css, trong các bài học trước mình cũng có nói về thẻ <div> và id nay mình sẽ sử dụng thẻ <div> và id cho bài học hôm nay là thuộc tính float.

  1. Thuộc tính float và clear trong css (thuộc tính float)

Thuộc tính float là gì? Các bạn có thể hiểu đơn giản là nó được dùng để tạo ra đối tượng trôi nổi. Để bạn hiểu rỏ thì mình sẽ làm ví dụ mẫu cho bạn xem.

vd: Tôi có 3 thẻ <div> viết trong HTML

và trong css

Kết quả đạt được

Thuộc tính float va clear trong css

Bạn muốn left center right nằm trên một dòng. Bạn muốn bố trí cho đẹp.  thuộc tính float trong css sẽ giúp bạn giải quyết vần đề này

Kết quả bây giờ là.

Thuộc tính float va clear trong css

 

2. Thuộc tính float và clear trong css (thuộc tính clear)

Đi cùng với float là clear. đây là thuộc tính cho phép phần tử không được float float.
clear có 3 giá trị:
+left: cố định phần tử về bên trái
+right: cố định phần tử về bên phải
+both: bên trái và bên phải của thành phần không được float.

Ví dụ: Khi chưa sử dụng thuộc tính clear

 
Và kết quả

Thuộc tính float va clear trong css

Khi sử dụng thuộc tính clear

Kết quả

thuộc tính float clear trong css

Chúc bạn thành công