Sử dụng thuộc tính Clearfix có thể tự động điều chỉnh phần tử cha theo phần tử con và khắc phục các sự cố trong mã HTML thông qua một số thuộc tính như “ tràn ra ” kiểm soát kích thước của các phần tử cha và phần tử con mà không yêu cầu đánh dấu bổ sung.
Sử dụng thuộc tính Clearfix
Hãy cùng hiểu việc sử dụng thuộc tính Clearfix để biết tác dụng của nó đối với đầu ra bằng cách thêm thuộc tính Clearfix CSS vào đoạn mã HTML:
Không có thuộc tính Clearfix
Hãy chạy một đoạn mã mà không thực thi thuộc tính Clearfix để hiểu loại sự cố mà Clearfix có thể giải quyết:
Tạo một lớp trong HTML để chèn hình ảnh vào vùng chứa div:
< div lớp học = 'xóa sửa' >
< anh >< hình ảnh lớp học = 'img' src = 'hình ảnh.png' mọi thứ = 'hình ảnh' chiều rộng = '250' chiều cao = '180' >
Chữ...
< / div >
Sau đây là mã CSS cho HTML ở trên:
.clearfix {
ranh giới : 3px chất rắn #2baa12 ;
đệm : 5px ;
}
.img {
trôi nổi : bên trái ;
}
Điều này sẽ tạo đầu ra theo cách mà lớp con chứa hình ảnh sẽ tràn ra bên ngoài vùng chứa. Trong những trường hợp như thế này, thuộc tính sửa lỗi rõ ràng có thể được sử dụng để xóa hoặc khắc phục sự cố này một cách dễ dàng:
Với thuộc tính Clearfix
Để khắc phục sự cố, chúng ta chỉ cần thêm một tràn ra thuộc tính có giá trị bằng tự động điều đó sẽ điều chỉnh vùng chứa chính theo kích thước của phần tử con:
.clearfix {
ranh giới : 3px chất rắn #2baa12 ;
đệm : 5px ;
}
.clearfix {
tràn ra : tự động ;
}
.img {
trôi nổi : bên trái ;
}
Ở đây trong đoạn mã này, lớp cha là vùng chứa và hình ảnh được chèn vào lớp con của nó:
< div lớp học = 'xóa sửa' >< anh >< hình ảnh lớp học = 'img' src = 'hình ảnh.png' mọi thứ = 'hình ảnh' chiều rộng = '250' chiều cao = '180' >
Chữ...
< / div >
Việc thêm thuộc tính Clearfix sẽ tự động mở rộng phần tử cha (vùng chứa) theo kích thước của phần tử con là hình ảnh được chèn vào:
Đây là cách một thuộc tính Clearfix trong HTML hoạt động.
Phần kết luận
Thuộc tính Clearfix được sử dụng để điều chỉnh các phần tử con trong HTML theo các phần tử cha với thuộc tính Clearfix đơn giản mà không yêu cầu đánh dấu bổ sung. Sử dụng CSS Clearfix để tăng hoặc giảm kích thước của các phần tử cha để điều chỉnh chúng theo kích thước của các phần tử con.