Thuộc tính float, clear

Trong phần này, chúng ta sẽ tìm hiểu nguyên lý hoạt động và áp dụng 2 thuộc tính float và clear trong CSS

Thuộc tính float

Thuộc tính float có tác dụng xác định phần tử hiển thị (nổi) phía bên trái hay bên phải.

Cú pháp

element{
    float: value;
}

Trong đó, value có thể là 1 trong 4 giá trị sau:

• 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ó

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

Ví dụ

Thuộc tính clear

Nếu một phần tử được thiết lập thuộc tính float mà theo sau nó là một phần tử không được thiết lập thuộc tính float thì phần tử theo sau sẽ bị ảnh hưởng bởi phần tử trước nó. Để khắc phục vấn đề này, thuộc tính clear cho phép xóa bỏ sự ảnh hưởng của thuộc tính float

Cú pháp

element{
    clear: value;
}

Trong đó, value có thể là một trong các giá trị sau:

• 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ụ

Trong ví dụ này, tại khối div3 do không có thuộc tính float nên bị ảnh hưởng bởi phần tử trước. Vì thế để không bị "lôi kéo" bởi phần tử đứng cạnh trước có thuộc tính float: left, ta áp dụng thuộc tính clear: both cho phần tử div3