Html 如何将浮动div保持在父div的框架内？

我有一个div，其中包含几个设置为float:left的其他div。现在我想要一个框架围绕着它们，所以我在父div上加了一个边框，但是浮动的那个从框架中“流出”

CSS:

Html:

999
阿桑奇

---

（在CSS中）我能做些什么使它们保持在父帧内？

将

溢出：隐藏
添加到父帧
-

您必须“清除浮动”，有多种“浮动清除”方法。有些解决方案仅涉及CSS，我的首选解决方案（有些人不喜欢它，因为它添加了额外的标记）是添加一个“clearing div”，其工作原理如下：

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
    <div style="clear:both"></div>
</div>


999
阿桑奇

请参阅最后一行的第二行。
您没有清除浮动。如果您将代码更改为此，它将解决您的问题

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

.clear {
     clear: both;   
}

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>

    <div class="clear"></div>
</div>

。渲染{
左侧填充：10磅；
边框宽度：1px；
边框样式：实心；
}
.栏目{
浮动：左；
左侧填充：10磅；
}
.清楚{
明确：两者皆有；
}
999
阿桑奇

请看我在这里设置的示例-

有关clear property的更多信息-
只是出于兴趣，与clear div相比，它有什么优势？这只是没有新的标记吗？@SpaceBears确切地说，对于像这样简单的事情，它比
clearfix
更合适。这篇文章的开头问题直截了当。他清楚地表明了他想做什么。添加溢出：隐藏；对ccs来说（佐尔坦·托斯给出的答案）对我来说是有效的。形象被打破了
.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
    <div style="clear:both"></div>
</div>

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

.clear {
     clear: both;   
}

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>

    <div class="clear"></div>
</div>