วิธีทำให้ Div มีความสูงในขณะที่ลอยอยู่ภายใน

ฉันจะทำให้ Div เพิ่มความสูงได้อย่างไรเมื่อมันลอยอยู่ข้างใน ฉันรู้ว่าการกำหนดค่าสำหรับความกว้างและการตั้งค่าส่วนเกินให้กับงานที่ซ่อนอยู่ ปัญหาคือฉันต้องการ div ที่มองเห็นได้มากเกินไป ความคิดใด ๆ ?

overflow:auto;บน div ที่มีอยู่ทำให้มองเห็นทุกอย่างที่อยู่ข้างใน (แม้แต่สิ่งของที่ลอยอยู่) และ div ด้านนอกล้อมรอบอย่างเต็มที่ ดูตัวอย่างนี้:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

การล้างลอยมีหลายวิธี คุณสามารถตรวจสอบได้ที่นี่:
http://work.arounds.org/issue/3/clearing-floats/

เช่นclear:bothอาจเหมาะกับคุณ

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

ในหลาย ๆ กรณีoverflow: auto;จะเพียงพอ แต่เพื่อความสมบูรณ์และการสนับสนุนข้ามเบราว์เซอร์ให้ดูที่Clearfixซึ่งจะทำงานได้กับเบราว์เซอร์ทั้งหมด

ลองพิจารณามาร์กอัปต่อไปนี้ ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

พร้อมรูปแบบดังต่อไปนี้ ..

.content { float:left; }

.clearfix { ..from link.. }

หากไม่มี clearfix ผู้ปกครองdivจะไม่มีส่วนสูงเนื่องจากเป็นเด็กลอยน้ำ clearfix จะทำให้ผู้ปกครองพิจารณาเด็กลอย

ฉันคิดว่าวิธีที่ดีในการทำคือการตั้งค่าdisplay: tableบน div