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

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

http://jsfiddle.net/8unU8/

Tôi nghĩ rằng tôi có thể xóa <div class="clear">bằng cách sử dụng các bộ chọn giả như: sau.

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

http://jsfiddle.net/EyNnk/

Tôi có luôn phải tạo một div riêng để xóa các phần tử nổi không?

Viết như thế này:

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

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

Không, bạn không làm điều gì đó như thế này là đủ:

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

Và CSS sau:

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%;
}

Điều này cũng sẽ hoạt động:

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

.clearfix:after {
    clear: both;
}

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

Đưa lớp clearfixcho phần tử mẹ , ví dụ như ulphần tử của bạn .

Nguồn ở đây và ở đây .

Văn bản 'dasda' sẽ không bao giờ nằm ​​trong thẻ, phải không? Về mặt ngữ nghĩa và để trở thành HTML hợp lệ, chỉ cần thêm lớp rõ ràng vào đó:

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

Sử dụng

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

Giống như giải pháp do Roko cung cấp. Nó cho phép chèn / thay đổi nội dung bằng cách sử dụng: after và: before psuedo. Để biết chi tiết, hãy xem http://www.quirksmode.org/css/content.html