Sử dụng: sau để xóa các phần tử nổi

Question

Tôi có một danh sách và số li có một số float:left;. Nội dung sau <ul> phải được căn chỉnh chính xác. Vì vậy tôi có thể xây dựng như sau:

http://jsfiddle.net/8unU8/

tôi nghĩ, tôi có thể loại bỏ các <div class="clear"> bằng cách sử dụng selectors giả như: sau.

Nhưng ví dụ không hoạt động:

http://jsfiddle.net/EyNnk/

Tôi luôn phải tạo một div riêng để xóa các yếu tố nổi?

Answer 1

Viết như thế này:

.wrapper:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

Kiểm tra này http://jsfiddle.net/EyNnk/1/

Answer 2

Văn bản 'dasda' sẽ không bao giờ không có trong một thẻ, phải không? Ngữ nghĩa và là HTML hợp lệ nó như là, chỉ cần thêm các lớp rõ ràng cho rằng:

http://jsfiddle.net/EyNnk/2/

Answer 3

Không, bạn không nó đủ để làm một cái gì đó như thế này:

<ul class="clearfix"> 
    <li>one</li> 
    <li>two></li> 
</ul> 

Và CSS sau đây:

ul li {float: left;} 


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

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

Answer 4

Sử dụng

.wrapper:after { 
    content : '\n'; 
} 

Giống như giải pháp được cung cấp bởi Roko. Nó cho phép chèn/thay đổi nội dung bằng cách sử dụng: after và: trước psuedo. Để biết chi tiết kiểm tra http://www.quirksmode.org/css/content.html

Answer 5

này sẽ làm việc tốt:

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

/* IE 6 & 7 */ 
.clearfix { 
    zoom: 1; 
} 

Cho lớp clearfix tới phần tử mẹ, ví dụ yếu tố ul của bạn.

Nguồn here và here.