这是个典型的浮动布局导致的文档流问题，我来帮你搞定它！

问题根源 #

你给.left和.right设置了float属性，浮动元素会脱离正常的文档流——简单说就是，父容器（.inner）和后续元素（比如.footer）无法感知到浮动元素的实际高度，所以当左侧长文本换行后，footer就会“钻”到浮动元素的下面，造成重叠。

方法一：用Clearfix修复浮动布局 #

你提到的clearfix就是专门解决这个问题的，它能让父容器重新包裹住浮动的子元素。具体做法分两步：

1. 给包含浮动元素的父容器（也就是.inner）添加一个clearfix类：

<div class="inner clearfix">

2. 在CSS里定义clearfix的样式：

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

这个伪元素会在.inner的末尾生成一个看不见的块级元素，它会“清除”左右两侧的浮动，让.inner能正确计算自身高度，这样.footer就会乖乖待在.inner的下方，不会再重叠了。

方法二：改用Flexbox布局（更推荐） #

浮动本来就不是为页面布局设计的，现代的Flexbox布局能更简单地解决这个问题，还不用处理浮动的各种坑。修改方式如下：

1. 调整.inner的CSS，用Flexbox来布局：

div.inner {
  padding: 5px 20px; /* 简化内边距的写法 */
  display: flex;
  justify-content: space-between; /* 让左右元素分别靠两端 */
  flex-wrap: wrap; /* 当宽度不够时自动换行 */
}

2. 去掉.left和.right的float属性：

div.left {
  display: block;
  text-align: left;
  max-width: 75%;
  /* 去掉float: left; */
}
div.right {
  display: block;
  /* 去掉float: right; */
}

这样调整后，不管页面宽度怎么变，左侧文本换行后，右侧元素会自动调整位置，.inner也会正确包裹所有子元素，footer自然不会重叠了。

总结 #

如果要保留浮动布局，clearfix是经典的修复方案；如果可以重构布局，Flexbox是更简洁、更易维护的选择，推荐优先使用后者。

内容的提问来源于stack exchange，提问作者John M.