使用浮动表格时，删除HTML页面底部的空格

在使用浮动表格时，HTML页面底部可能会出现空余空间，这通常是由于浮动元素脱离了正常的文档流导致的。为了解决这个问题，可以采用以下几种方法：

方法一：清除浮动

在浮动元素的容器内部添加一个清除浮动的元素。这个元素不需要显示任何内容，只是用来清除浮动影响。

<div class="table-container">
    <table>
        <!-- 表格内容 -->
    </table>
    <div class="clearfix"></div> <!-- 清除浮动的元素 -->
</div>

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

方法二：使用 overflow 属性

给浮动元素的容器添加 overflow 属性，设置为 hidden 或 auto，这样可以创建一个新的块格式化上下文，从而包含浮动元素。

.table-container {
    overflow: hidden; /* 或者 overflow: auto; */
}

方法三：使用 Flexbox 或 Grid 布局

如果可能的话，可以考虑使用 Flexbox 或 CSS Grid 布局来替代浮动布局，因为这些现代布局方法可以更好地控制元素的对齐和空间分配。

<div class="table-container">
    <table>
        <!-- 表格内容 -->
    </table>
</div>

.table-container {
    display: flex;
    flex-direction: column;
}

方法四：设置父元素的底部边距

有时候，简单地给父元素设置一个底部边距也可以解决问题，尤其是当浮动元素的高度小于其容器时。

.table-container {
    margin-bottom: -10px; /* 根据实际情况调整负值 */
}

应用场景

这些方法适用于任何需要使用浮动布局的HTML页面，尤其是在创建响应式网页设计时，浮动表格是常见的布局方式。通过上述方法，可以确保页面底部没有不必要的空余空间，从而提高页面的整体美观性和用户体验。

选择哪种方法取决于具体的设计需求和兼容性考虑。清除浮动是最传统的方法，而 Flexbox 和 Grid 布局则是更为现代和灵活的解决方案。