Nói lời tạm biệt với Clearfix Hack With display: flow-root
Việc hack clearfix đã xuất hiện từ lâu và đã vá một sự cố có thể xảy ra với các phần tử nổi lớn hơn containers của chúng.
Đây là một ví dụ về vấn đề:
.box { padding: 1rem; background: rgba(255, 105, 180, 0.1); border: 3px dashed rgba(255, 105, 180, 0.1); border-radius: 5px; } .box img { float: left; } <div class="box"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit…Các bản hack clearfix cũ
Bản sửa lỗi cũ là đặt overflow: auto trên containers , vì vậy một lớp như thế này thường được tạo và sử dụng trên các phần tử có chứa phần tử nổi:
.clearfix { overflow: auto; } <div class="box clearfix"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> Và bây giờ mọi thứ hoạt động như mong đợi:
Lorem ipsum dolor sit amet, consectetur adipiscing elit…display: flow-root Cải tiến
Với display: flow-root trên phần tử containers , một ngữ cảnh định dạng khối mới được cài đặt cho phần tử có định dạng bố cục stream và điều này khắc phục các vấn đề tràn của ta một cách thanh lịch hơn nhiều.
.box { display: flow-root; padding: 1rem; background: rgba(255, 213, 70, 0.1); border-bottom: 2px solid rgba(236, 198, 48, 0.2); } <div class="box"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit…tính tương thích của trình duyệt web
Tính đến năm 2020, 87% trình duyệt trên toàn thế giới sẽ xử lý stream root đúng cách, dựa trên dữ liệu Tôi có thể sử dụng. Opera Mini và Internet Explorer 11 không thể xử lý display: flow-root; , nhưng vào năm 2020, nó chỉ chiếm ít hơn 1,5% lượng sử dụng trên toàn thế giới.
Các tin liên quan
