HTML图片大于div边框

Question

我的图片比我的div高，如果里面的东西更大，如何告诉div调整大小？这是我的代码：

<div {% if editable %}style="overflow-wrap: break-word; border-color: grey; border-style: solid; border-radius: 25px"{% else %}style="border-color: grey; border-style: solid; border-radius: 25px"{% endif %}>
        <h4>{{ new.header }}</h4>
        <p><img src="{{ new.file.url }}" style="max-width: 250px; float: left; height: auto">{{ new.text|safe }}</p>
        <p align="right">Дата: <strong>{{ new.added }}</strong></p>
        {% if editable == True %}
            <a href="{% url 'create_news' %}?news_id={{ new.pk }}" style="display: inline; float: right; padding-right: 5px; margin: 0">
                <button type="submit" class="btn btn-warning">изменить</button>
            </a>
            <form onsubmit="return confirm('Вы точно хотите удалить новость?');" method="post" style="display: inline; float: right; padding-right: 5px; margin: 0" action="{% url 'news_delete' news_pk=new.pk %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">удалить</button>
            </form>
        {% endif %}
    </div>

Answer 1

图像是浮动的，因此它可以可以离开其父容器。为避免这种情况，您可以将overflow: auto添加到父容器（即HTML示例代码以div开头），这样，整个浮动图像将在其父对象的内部边界就会绕过它。

Answer 2

我已经按照Ahmed Tag Amer的建议尝试了clearfix，它确实有效。