内容过长时Clearfix代码引发横向滚动条问题的解决咨询

不需要修改你用的Clearfix代码，问题出在内容溢出的控制上，跟清除浮动的代码没关系。

问题根源 #

当栏里出现超长的无空格内容（比如特别长的单词、一串连在一起的数字/字符）时，浏览器默认不会自动换行拆分，会直接撑宽容器，导致整个页面出现横向滚动条。你当前的浮动+负margin布局逻辑本身没问题，但没处理这种内容溢出的情况。

快速修复现有布局 #

给固定栏和自适应栏的内容容器加上强制换行的CSS属性，就能解决问题：

修改后的完整CSS代码：

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

div.fixed {    
  margin-right: 40px;
  text-align: right;
  width: 360px;
  float: left;
  /* 新增：强制超长内容换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
  
div.fluid {               
  margin-right: -400px;
  width: 100%;
  float: left;             
}
  
div.frame {
  margin-right: 400px;
  text-align: left;
  /* 新增：强制超长内容换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

word-wrap: break-word 和 overflow-wrap: break-word 是为了兼容不同浏览器，让超长内容能在容器宽度范围内自动换行，不会撑破容器。

更稳定的替代方案：用Flex布局重构 #

如果想彻底避开浮动布局的潜在问题，可以改用Flex布局，代码更简洁，也不需要额外的Clearfix代码：

重构后的CSS代码：

div.panel {
  display: flex;
  gap: 40px; /* 替代原布局的margin-right，控制两栏间距 */
}

div.fixed {    
  text-align: right;
  width: 360px;
  /* 强制超长内容换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
  
div.fluid {               
  flex: 1; /* 自动占据剩余宽度 */
}
  
div.frame {
  text-align: left;
  /* 强制超长内容换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

对应的HTML代码无需修改，Flex布局本身不会出现浮动导致的父容器高度塌陷问题，整体布局稳定性更强。

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