CSS列定位布局异常 页脚未渲染在正文下方问题求助

问题根源 #

你使用了float浮动布局但未做浮动清除，承载左右两栏的.articlebody容器由于所有子元素都脱离了普通文档流，自身高度被计算为0，因此后续的footer元素直接排到了两栏内容的上方，就出现了你现在看到的异常效果。

解决方案 #

这里提供两种可行的修复方式，你可以任选一种：

1. 添加浮动清除（兼容旧写法）
   先在CSS中新增清除浮动的通用类：

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

   再给HTML中的.articlebody容器加上这个类即可：

   <div class="articlebody clearfix">
   

2. 改用Flex布局（更推荐，稳定性更高）
   直接替换原有相关CSS，放弃float写法，完全规避浮动塌陷问题：

   .articlebody{
       display: flex;
       margin: 5px;
       box-sizing: border-box;
   }
   .articlecontent{
       width: 66.66%;
       height: auto;
   }
   .articlesidebar{
       width: 33.33%;
       height: inherit;
   }
   

补充提示 #

你footer内部的三个.column也使用了float布局，建议也给footer元素加上clearfix类，或者同样改成Flex布局，避免后续footer内部也出现布局异常。

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