อาการซ้อนกันของ Layout ใช้ Element เปล่า ทำการเคลียร์ เช่น
กำหนด css ขึ้นมา หนึ่งคลาส แล้วสั่ง clear:both; หรือ ขจัดสิ่งขอรอบข้าง โดยเอา element นั้นไปวางไว้ก่อนปิด section ตัวแรก

.clear  {
clear:  both;
}

<section>
 <article>
 <h1>ส่วนของ  Article</h1>
 </article>

 <aside>
 <h1>ส่วนของ  Aside</h1>
 </aside>
<span style="color: red;"><p  class="clear">&nbsp;</p></span>
</section>

<section>
 <p>ทดสอบการเขียน  clear content</p>
</section>

แต่ การเพิ่ม element เปล่าเข้ามาในเอกสาร ขัดกับหลักการของ web accessibility เมื่อเอาไปตรวจจับ อาจจะขึ้นตัวแดงๆ ไม่ผ่านมาตรฐาน จึงเกิดวิธีการที่ 2 ตามมา คือ

การใช้คำสั่ง css create content แล้วค่อยเคลียร์ โดยสั่งงานใน element ที่เป็นปัญหา ในตัวอย่าง ปัญหาเกิดที่ section ของ body การแก้ไข สามารถเขียนได้เป็น

body>header:first-child+section:after  {
 content:  " ";
 display:  block;
 clear:  both;
}

ตามคำสั่ง CSS ด้านบนคือ :after หรือ หลังจากแสดงผล section เสร็จแล้ว ก่อนปิด ให้กระทำการ สร้าง content (content:””;)
ในที่นี้ เขียนค่าเปล่าออกมา ทุกๆ เนื้อหาที่ถูกสร้างออกมา จะเปรียบเสมือน phrasing content หรือ มีพฤติกรรมเป็น inline element
ต้องสั่งการให้มันแสดงเป็น block ด้วยคำสั่ง display: block; หลังจากนั้นค่อนสั่ง clear
ซึ่งลักษณะอย่างนี้ ในการจินตนาการ ก็ไม่ได้ต่างอะไรจากการนำ element ใดๆ มาใส่ค่าเปล่าแล้วสั่งการด้วยคลาส เคลียร์ (.clear) ที่เขียนไว้ก่อน

สิ่งที่ดีกว่าการเคลียร์แบบแรกก็คือ โค้ดสะอาดกว่า

float ไม่ได้เอาไว้จัดการวาง layout แต่ float มีไว้เพื่อจัดการ”ของ” ที่อยู่ใน layout นั่นต่างหาก
เช่น รูปภาพที่อยู่ในเนื้อหา จะให้มันอยู่ด้านซ้าย หรือขวา แค่นั้น

คำสั่งที่ใช้จัดการ Layout มันคือ position และ display

thaicss.com/clear-fix-ทำไม-และ-ทำไมต้อง-clearfix/