两栏布局如何修复footer错位及背景溢出 置于#wrapper底部

问题效果参考图

就是浮动引发的典型布局bug：

• .left、.right两栏设置浮动后会脱离普通文档流，父容器#wrapper、<main>默认不会识别浮动元素的高度，出现高度塌陷，相当于两栏“浮”在了普通内容层上方
• footer没有配置清除浮动规则，会按普通流定位到前一个非浮动元素的底部，直接和浮动的两栏重叠，这时候给footer加背景色自然会盖住两栏内容
• 额外还有个HTML结构错误：<body>标签被错放在#wrapper内部，<footer>也写到了</body>标签外面，不符合HTML规范，也会干扰布局渲染。

1. 先修正HTML结构：把整个#wrapper容器移到<body>标签内部，保证<footer>在#wrapper内部、</body>标签之前，结构嵌套逻辑正确。
2. 给footer加清除浮动规则，强制它排在所有浮动元素下方，这时候加背景色就不会覆盖两栏了：

footer {
  text-align: center;
  clear: both; /* 清除左右两侧浮动，不允许相邻位置有浮动元素 */
  /* 在这里加你的背景色、内边距等样式即可 */
  padding: 12px 0;
}

3. 修复父容器高度塌陷，给#wrapper触发BFC，让它能完全包裹内部的浮动元素，保证所有内容都在容器范围内：

#wrapper {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  background-color: #ffe5b4;
  min-width: 900px;
  max-width: 1280px;
  border: 2px solid #ffca68;
  border-top: none;
  overflow: hidden; /* 新增该行，触发BFC解决高度塌陷 */
}

• 你当前CSS里重复定义了两次footer样式，合并成一段即可，不用重复写相同规则
• 后续如果要给两栏加内边距、边框，建议全局加* { box-sizing: border-box; }，避免宽度总和超过100%引发的布局错位。

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