ใช้: หลังจากล้างองค์ประกอบลอย

ฉันมีรายชื่อและ Li มีfloat:left;. เนื้อหาหลัง<ul>ควรจัดเรียงให้ถูกต้อง ดังนั้นฉันสามารถสร้างสิ่งต่อไปนี้:

http://jsfiddle.net/8unU8/

ฉันคิดว่าฉันสามารถลบออกได้<div class="clear">โดยใช้ตัวเลือกหลอกเช่น: after

แต่ตัวอย่างไม่ทำงาน:

http://jsfiddle.net/EyNnk/

ฉันต้องสร้าง div แยกต่างหากเพื่อล้างองค์ประกอบที่ลอยอยู่เสมอหรือไม่

เขียนดังนี้:

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

ตรวจสอบที่นี่http://jsfiddle.net/EyNnk/1/

ไม่คุณไม่เพียงพอที่จะทำสิ่งนี้:

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

และ CSS ต่อไปนี้:

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

สิ่งนี้จะใช้ได้เช่นกัน:

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

.clearfix:after {
    clear: both;
}

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

ให้คลาสclearfixแก่องค์ประกอบหลักเช่นulองค์ประกอบของคุณ

แหล่งที่มาที่นี่และที่นี่

ข้อความ 'dasda' จะไม่อยู่ในแท็กใช่ไหม? ในเชิงความหมายและเพื่อให้เป็น HTML ที่ถูกต้องเพียงแค่เพิ่มคลาสที่ชัดเจนลงในสิ่งนั้น:

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

ใช้

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

เหมือนกับโซลูชันที่จัดทำโดย Roko อนุญาตให้แทรก / เปลี่ยนแปลงเนื้อหาโดยใช้: after and: before psuedo ดูรายละเอียดได้ที่ http://www.quirksmode.org/css/content.html