Tại sao div "container" của tôi không chứa các phần tử lưu hành của tôi?

Question

Tôi đang tạo trang web cho cuộc thi "Toán chuyển tiếp" của trường học.

Tôi có div "Vùng chứa" (với nền màu trắng), sau đó là thanh trên cùng, thanh bên trái và thanh bên phải trong vùng chứa.

thanh bên trái và thanh bên phải đều được thả bên trong "Vùng chứa".

Tuy nhiên, nếu bạn nhìn vào hình ảnh bên dưới, bạn có thể thấy thanh bên phải có nền màu xám hiển thị bên dưới. Nếu "Container" thực sự chứa cả thanh trên cùng, bên trái và bên phải thì nó phải là nền thùng chứa hiển thị thông qua và phía dưới tất cả phải ở mức đồng nhất với màu trắng.

Thay vào đó, có vẻ như vùng chứa không chứa đầy đủ thanh bên phải & bên phải và do đó nền nội dung thực tế hiển thị thông qua ở dưới cùng của thanh bên phải.

Đây là CSS của tôi:

#container { 
    margin: 0 auto; 
    width: 750px; 
    background-color: #ffffff; } 

#top-panel { 
    background-color: #000000; 
    text-align: left; 
    width: 100%; 
    height: 88px; 
    float: left; } 

#left-panel { 
    clear: left; 
    text-align: center; 
    background-color: #ffffff; 
    border-right: 1px dashed #000000; 
    float: left; 
    width: 250; } 

#right-panel { 
    background-color: #ffffff; 
    float: left; 
    width: 499; } 

Liên kết với các trang here.

Làm cách nào để làm cho "vùng chứa" thực sự chứa các div bên trong nó để nền màu xám sẽ không hiển thị bên dưới bảng bên phải của tôi và tạo cấp không đồng đều của tôi ở dưới cùng?

Answer 1

Cả hai bảng của bạn đều được thả nổi và do đó được lấy ra khỏi luồng thông thường của trang. Để làm cho container đóng gói chúng, bạn phải xóa phao. Cách tôi làm là làm cho lớp học rõ ràng cho br:

.clear { 
    clear:both; 
    line-height:0; 
} 

Bằng cách này, nó chiếm không gian và rõ ràng. Sau đó, đặt nó dưới hai div trong div vùng chứa như vậy

<br class="clear" /> 

Nên hoạt động!

Answer 2

Không có gì đang buộc ngăn chặn, bạn có thể chỉ định rõ ràng trên phần tử cuối cùng để ép buộc sự kết dính. Một hack chung là thêm một yếu tố ngăn chặn bổ sung với clear:both ví dụ: <div style="clear:both"></div>

Answer 3

overflow: auto 

nên sửa chữa nó.

Answer 4

Có một phương thức css duy nhất để xử lý vấn đề được gọi là clearfix. Tốt nhất là nên sử dụng nó như một lớp học mà bạn áp dụng có chọn lọc cho các div bạn muốn:

.clearfix { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Đối với đánh dấu cụ thể của bạn, css sau đây sẽ làm:

#left-panel:after, 
#right-panel:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Reference http://www.positioniseverything.net/easyclearing.html

Answer 5

overflow:hidden; height:100%; <-- for ie 

Trên thùng chứa sẽ làm điều đó.