CSS Float技术问题：固定定位下清除两个div的浮动

嘿，我看你正在搭建学习用的站点，遇到了固定定位下清除浮动的问题——这确实是新手常踩的坑，毕竟固定定位元素脱离文档流后，常规清除浮动的逻辑会有点变化。先把你贴的代码整理一下方便查看：

require_once 'includes/functions.php'; 
<?php if(logged_in()) { 
    $data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"'); 
    $row = $data->fetch_assoc; 
    $mcount = $row['num']; 
} ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- 你的页面内容 -->

回到浮动清除的核心问题，假设你的页面结构是固定定位容器内包含两个浮动div，类似这样：

<div class="fixed-container">
  <div class="float-left">左侧浮动元素</div>
  <div class="float-right">右侧浮动元素</div>
</div>

问题本质 #

固定定位（position: fixed）的元素本身脱离了正常文档流，但它内部的浮动元素依然会导致容器高度塌陷——因为浮动元素不占用容器的正常文档流空间，容器会默认认为自己没有内容，出现高度为0或布局错乱的情况。

推荐的3种解决方案 #

按实用性和规范度排序：

1. Clearfix伪元素方案（最通用，无冗余DOM）

给固定定位的父容器添加一个clearfix类，通过CSS伪元素自动清除内部浮动：

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 你的其他样式 */
}

/* 通用clearfix样式 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在HTML中给父容器加上这个类：

<div class="fixed-container clearfix">
  <div class="float-left">左侧浮动元素</div>
  <div class="float-right">右侧浮动元素</div>
</div>

这个方法无需额外添加HTML元素，纯CSS解决，兼容性拉满，适合绝大多数场景。

2. 给父容器设置overflow属性（简洁但有局限性）

如果你的固定定位容器不需要显示溢出内容，可以直接给它设置overflow: auto或overflow: hidden：

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: auto; /* 或overflow: hidden */
}

注意：如果容器内有需要溢出显示的内容（比如下拉菜单），overflow: hidden会直接切掉溢出部分，这种情况就不能用这个方法。

3. 添加空元素清除浮动（简单但不推荐）

这是最原始的方法，在两个浮动元素后加一个空div并设置clear: both：

<div class="fixed-container">
  <div class="float-left">左侧浮动元素</div>
  <div class="float-right">右侧浮动元素</div>
  <div style="clear: both;"></div>
</div>

这种方法虽然直观，但会增加无意义的DOM元素，不利于代码维护，仅适合临时测试使用。

额外小建议 #

从你贴的代码看，页面用的是XHTML 1.0 Transitional，建议慢慢过渡到HTML5标准的DOCTYPE（<!DOCTYPE html>），兼容性更好也更符合现代开发规范。另外，你的SQL查询直接拼接了$_SESSION['id']，存在SQL注入风险，建议改用预处理语句来避免安全问题哦。

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