如何仅用HTML和CSS实现视频右浮动且不造成footer布局错位

问题根源 #

你遇到的footer上移、布局错乱是浮动元素导致的父容器高度塌陷问题：设置了float: right的video元素脱离了正常文档流，它的父容器<main>和外层#containerptr计算高度时不会包含这个浮动的视频元素，容器高度比实际内容高度小，排在后面的footer就会向上移动填充空缺位置。

解决方法 #

最简方案（仅修改CSS，无需改动HTML） #

直接给footer的CSS规则添加clear: both属性，强制footer避开所有左右侧的浮动元素，自动排在浮动视频下方：

footer {
    clear: both; /* 新增这一行即可 */
    font-size: .7em;
    text-align: center;
    border-top: 1px solid #003366;
    background-color: #BACBE0;
    padding-bottom: 5px;
    padding-top: 5px;
}

通用方案（适合多浮动元素场景） #

如果后续页面还有其他浮动元素，更推荐使用通用clearfix方案，无需反复修改样式：

1. 在CSS中新增清除浮动的通用类：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. 给包裹浮动视频的父标签<main>添加该类：

<main class="clearfix">
<!-- 原有main标签内的内容保持不变 -->
</main>

两种方案都仅使用CSS和HTML实现，完全符合作业要求。修改完成后容器会正常识别浮动视频的高度，footer会回到页面底部的正常位置。

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