Trang chủ
CSS
CSS nổi
Xóa CSS
Dùng thử: Bản hack Clearfix mới
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> div { border: 3px Solid #4CAF50; phần đệm: 5px; } .img1 { float: đúng; } .img2 { float: đúng; } .clearfix::after { nội dung: ""; rõ ràng: cả hai; hiển thị: bảng; } </style> </head> <body> <h2>Không có Clearfix</h2> <p>Hình ảnh này được thả nổi bên phải. Nó cũng cao hơn phần tử chứa nó, vì vậy nó tràn ra ngoài vùng chứa của nó:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" Height ="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">Với Clearfix hiện đại mới</h2> <p>Thêm bản hack Clearfix vào phần tử chứa để khắc phục sự cố này:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" Height="170"> Lorem ipsum dolor ngồi amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body> </html>