如何解决div元素作为ul子元素的HTML验证报错问题

HTML语法对不同标签的子元素有明确限制：无序列表标签<ul>的直系子元素只能是列表项标签<li>或者脚本类元素，不能直接放<div>标签。你现在把用来清除浮动的<div style="clear: both;">直接放在了最后一个</li>结束标签和</ul>结束标签之间，让div成了ul的直接子元素，不符合语法规则，所以触发了报错。

• 方案1：移动清除浮动的div到ul标签外
  不需要改动原有样式逻辑，仅调整标签位置就可以解决问题，修改后对应代码如下：

</li>
    </ul>
    <!-- 清除浮动的div移到ul结束标签之后，作为timeline容器的子元素，既符合语法也不影响清除浮动的效果 -->
    <div style="clear: both;">
    </div>
</div>

• 方案2：给ul加清除浮动样式，删除额外的div
  你也可以直接给<ul>标签本身添加清除浮动的样式，不用额外加div，同样能解决浮动高度塌陷的问题，代码示例：

<!-- 给ul添加overflow:hidden或者clear:both样式 -->
<ul style="overflow: hidden;">
    <!-- 原有li内容保持不变 -->
    <li>...</li>
    <li>...</li>
</ul>
<!-- 原来的清除浮动div可以直接删掉 -->

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