HTML有序列表与下方元素重叠问题求助

问题根源：.gallery类使用了float: left，但父容器<ol id="list">未处理浮动，导致容器高度塌陷，下方的<h1>元素因此和浮动图片重叠。

不需要使用固定边距或<br>，通过以下任意一种方式修复：

方法1：利用BFC包裹浮动元素 #

修改#list的CSS样式，添加overflow: auto触发块级格式化上下文，让父容器包裹住内部浮动元素：

#list{
 font-size:  1.5em;
 margin-left: 90px;
 margin-right: 90px;
 overflow: auto; /* 添加此行 */
}

方法2：用伪元素清除浮动 #

给<ol>添加伪元素，专门清除浮动影响，这种方式不会影响容器的overflow属性：

#list::after {
  content: "";
  display: table;
  clear: both;
}

额外优化提示 #

你的HTML中多个<li>标签使用了相同的id="nostyle"，这违反了HTML规范（id必须唯一）。建议将id="nostyle"改为class="nostyle"，同时修改CSS：

.nostyle {
  list-style-type: none;
}

修改完成后，下方的<h1 class="pyrus">会自动排在图片列表的下方，保持与图片的相对位置，不再出现重叠。

内容的提问来源于stack exchange，提问作者CosmicOwls CosmicOwls