Html 如何区分这两者<；部门>；从一行开始？

我看过很多文章把两个元素放在一行中。 我的问题恰恰相反！ 正如您在代码中看到的，有五个方框，旁边有一个段落，应该放在方框下面。 有人能告诉我怎么修吗？ 我现在正在学习HTML/CSS，在继续学习之前，我想在没有grid/flex的情况下解决这个问题

HTML:

以下是代码笔链接：

提前谢谢你

.box
{
    width: 5em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    background-color: gray;
    /* float: left; */

    display: inline-block;/* instead of block */
}

编辑

如果出于某些原因需要使用float，则不建议将float添加到add float:left to the#top box元素中

#top-boxes{float:left}

编辑

如果出于某些原因需要使用float，则不建议将float添加到add float:left to the#top box元素中

#top-boxes{float:left}

---

添加

清除：两者都有

到p元素

p{clear:both}

？我不确定我是否理解你的问题…@G-Cyrillus yes

p{clear:both}

将忽略上一个元素的浮动add

clear:both

到p元素

p{clear:both}

？我不确定我是否理解你的问题…@G-Cyrillus yes

p{clear:both}

将忽略前面元素的浮动注释不用于扩展讨论；此对话已结束。评论不用于扩展讨论；这段对话已经结束。

#top-boxes{float:left}