thay thế rõ ràng: cả hai với lớp giả

Question

Trước đây, khi tôi có khối nổi, và tôi sẽ dừng phao, tôi đã sử dụng;

<div style="clear:both"></div> 

Nhưng bây giờ, tôi giải quyết vấn đề này với lớp giả:

.last_floating_div:after { 
content: ""; 
display: table; 
clear: both; 
} 

Tôi đã luôn luôn làm việc một cách hoàn hảo. Nhưng hôm nay ... Nó không hoạt động ...! Hãy xem ví dụ rõ ràng này: http://jsfiddle.net/YsueS/2/

Tôi biết vấn đề của tôi là vấn đề mới bắt đầu. Tôi đã bán vấn đề này rất nhiều lần ... Tôi thực sự không hiểu tại sao nó không hoạt động ở đây!

Rất cám ơn tất cả các bạn!

Answer 1

Chắc chắn - bạn có thể xóa nó thông qua :after clearfix, tuy nhiên giải pháp tối ưu, nhẹ nhất sẽ chỉ là đặt overflow:hidden trên phụ huynh, đạt được hiệu quả mong muốn với ít mã hóa hơn nhiều.

#mention { 
    overflow: hidden; 
} 

jsFiddle here

Để trả lời câu hỏi trực tiếp tuy nhiên, bạn nên đã áp dụng :after clearfix để #mentions - phụ huynh, thay vì con .. jsFiddle here nó hoạt động.

Answer 2

Tôi nghĩ bạn cần một điều khoản: sau khi thực hiện những gì bạn đang tìm kiếm.

Ví dụ,

#mention:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
#mention { display: inline-block; } 

* html #mention{ height: 1%; } /* for older ie */ 
#mention { display: block; } 

WORKING DEMO

Hope this helps.

Answer 3

Nếu bạn chỉ cần thêm :after vào id mention bạn sẽ nhận được hiệu ứng mong muốn.

#mention:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

JSFIDDLE