不能在网格元素内浮动两个项目

Question

我有一个带有一堆项目的网格。 其中一项包含图像和一些文本。 我想将文本浮动到图像旁边，但无法使其正常工作...

请参见下面的代码：

<div id="blog-post-item" class="blog-post">
    <h1>Some amazing blogpost title about something super cool!</h1>
    <div class="blog-post-content">
        <div class="content-flex-container clearfix">
            <img src="Data/Content/food_post5.jpg">
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.</p>
        </div>
    </div>
</div>

body {
    display: grid;
    background: tomato;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(max-content, max-content);
    column-gap: 20px;
    row-gap: 20px;
}

.blog-post {
    background: #fff;
    border: 5px solid #fff;
    border-radius: 10px;
    display: grid;
    grid-template-rows: minmax(auto, max-content) 1fr;
    height: 100%;
    grid-column: 2/-1;
    width: 100%;
}

.blog-post h1 {
    grid-row: 1;
    grid-column: 1/-1;
}

.blog-post-content {
    grid-row: 2;
}

.content-flex-container {
    height: 100%;
    width: 100%;
    display: block;
}

.content-flex-container img {
    height: 100%;
    float: left;
}

.content-flex-container p {
    float: left;
}

但这是我得到的结果：

如您所见，文字位于图像下方，而不是大白色开放空间中图像的右侧。

如果需要更多信息，请告诉我，以便我澄清。