CSS container div ไม่ได้รับความสูง

ฉันต้องการให้คอนเทนเนอร์ div ของฉันได้รับความสูงสูงสุดของความสูงของเด็ก โดยไม่รู้ว่าเด็กdivจะมีความสูงเท่าใด ผมพยายามออกในJSFiddle ภาชนะdivเป็นสีแดง ซึ่งไม่ปรากฏขึ้น ทำไม?

เพิ่มคุณสมบัติต่อไปนี้:

.c{
    ...
    overflow: hidden;
}

สิ่งนี้จะบังคับให้คอนเทนเนอร์เคารพความสูงขององค์ประกอบทั้งหมดภายในโดยไม่คำนึงถึงองค์ประกอบที่ลอยอยู่
http://jsfiddle.net/gtdfY/3/

UPDATE

เมื่อเร็ว ๆ นี้ฉันกำลังทำโปรเจ็กต์ที่ต้องใช้เคล็ดลับนี้ แต่จำเป็นต้องอนุญาตให้มีการแสดงล้นดังนั้นคุณสามารถใช้องค์ประกอบหลอกเพื่อล้างการลอยตัวของคุณได้อย่างมีประสิทธิภาพเพื่อให้ได้เอฟเฟกต์เดียวกันอย่างมีประสิทธิภาพในขณะที่ปล่อยให้ทุกองค์ประกอบล้น

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

คุณกำลังลอยเด็กซึ่งหมายความว่าพวกเขา "ลอย" อยู่หน้าภาชนะ ในการรับความสูงที่ถูกต้องคุณต้อง "ล้าง" ลูกลอย

div style = "clear: both" เคลียร์ลอยและให้ความสูงที่ถูกต้องกับคอนเทนเนอร์ ดูhttp://css.maxdesign.com.au/floatutorial/clear.htmสำหรับข้อมูลเพิ่มเติมเกี่ยวกับลอย

เช่น.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

มันไม่ง่ายกว่านั้น?

.c {
    overflow: auto;
}

ลองใส่ div การหักล้างนี้ก่อนหน้าสุดท้าย </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

วิธีแก้ปัญหากันกระสุนที่ดีที่สุดและดีที่สุดคือการเพิ่ม::beforeและ::afterเทียมลงในภาชนะ ดังนั้นหากคุณมีตัวอย่างรายการเช่น:

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

และทุกองค์ประกอบในรายการมีfloat:leftคุณสมบัติคุณควรเพิ่มใน css ของคุณ:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

หรือคุณอาจลองใช้display:inline-block;คุณสมบัติจากนั้นคุณไม่จำเป็นต้องเพิ่ม clearfix ใด ๆ