Làm việc với cái chứa đổ (Container collapse)
Nhớ lại một phần tử được làm cho trôi bị lấy ra khỏi dòng tài liệu để rằng nó không còn là một phần
của phần tử cái chứa nó. Nghĩa đen thì nó đang trôi tự do khỏi cái chứa của nó. Khi mọi phần tử trong
một cái chứa được làm cho trôi, không còn nội dung để lại. Trong chừng mực trình duyệt quan tâm, cái chứa
là rỗng và vì vậy không có chiều cao và không có nền (background) để làm màu, một tình huống được biết đến
như container collapse (cái chứa đổ). Ảnh dưới minh họa container collapse cho một cái chứa
cái có 3 đối tượng đang trôi cái vượt quá gianh giới của cái chứa của chúng.
Cái bạn thường muốn trong bố cục của bạn là có container mở rộng để bao quanh tất cả nội dung đang
trôi của nó. Một cách thức để cái này có thể xảy ra là nếu cái chứa được đi theo bởi phần tử khác cái được
hiển thị chỉ khi các lề (margins) được giải phóng khỏi các floats. Trong tình huống đó, chiều cao của cái
chứa sẽ mở rộng tới phần tử gắn đuôi đó và trong quá trình bao quanh nội dung đang trôi của nó.
Chúng ta có thể sử dụng after pseudo-element để thêm một phần tử placeholder sau phần tử cuối cùng của cái
chứa. Quy tắc style chung là:
container::after {
clear: both;
content: “”;
display: table;
}
nơi container là cái chọn cho phần tử chứa các đối tượng đang trôi. Đặc tính clear giữ phần tử placeholder
này khỏi bị điền cho đến khi cả hai lề giải phóng khỏi các floats. Bản thân phần tử là một web table nhưng chỉ
chứa một text string rỗng để rằng không nội dung thực nào được viết vào web page.Sự có mặt của phần tử placeholder
này đủ để giữ cái chứa khỏi collapsing (đổ).