css扩展边框以包含图像

Question

我有一个标识为information的html div。理想情况下，边框将延伸到div中图像的底部。

<div id="information">
    <img src="newtroot-256.png" id="newtroot256" style="float:left;"/>
    <span style="position:relative;left:10px;">
        Hi! My name is Nicki.
    </span>
</div>

表示html和

div#information {
    color:burlywood;
    margin-left:2em;
    margin-right:2em;
    border:2px solid lime;
    border-radius:25px;
    background-color:rgba(85,107,47,0.75);
    padding:10px;
    background-opacity:0.5;
}

对于css是相关部分。输出是

但我想边框包含图片。我怎么做这个是css / html。我不想包含javascript，但如果它是唯一的解决方案，我会接受它。

Answer 1

因为图像是浮动的，所以它会从正常流动中移除。要使父项展开，浮点数必须为cleared。

#information:after {
    content: '';
    display: table; 
    clear: both;
}