CSS浮动双列布局意外显示footer绿色背景问题排查

列区域显示footer绿色背景是浮动脱离文档流导致的高度塌陷+元素覆盖问题：

• 你为.column设置了float: left，浮动元素会脱离普通文档流，不占据常规布局空间
• 包裹两列的.row容器没有做清除浮动处理，计算自身高度时不会统计内部浮动子元素的高度，最终实际渲染高度为0
• 后续的footer元素按照普通文档流排布时，会直接排布到高度为0的.row位置，也就是两列内容的下方，footer的绿色背景自然会铺在浮动列的底层，视觉上就像列区域被染成了绿色。

只需要让.row容器正确包裹内部浮动元素，把footer挤到列内容下方即可，推荐两种无兼容问题的实现：

• 方法1：触发父容器BFC，直接给.row加overflow规则

.row {
  overflow: hidden;
}

• 方法2：伪元素清除浮动（行业通用方案，不会裁剪溢出内容）

.row::after {
  content: "";
  display: block;
  clear: both;
}

1. HTML头部的机构名称未使用合法标签包裹，会直接异常显示在页面中，需要放入<title>标签：

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Interdisciplinary Educational Institute</title>
</head>

2. 当前.column宽度设置为33.33%，两列总宽度仅占容器的2/3，如果要实现等宽双列布局，把宽度值修改为50%即可。

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