使用Skeleton Grid为footer加背景，添加columns类后失效如何解决

问题原因 #

你使用的栅格系统中.columns类默认带有float: left属性，浮动元素会脱离正常文档流，导致父级容器.footer无法识别内部浮动内容的高度，出现高度塌陷，因此你设置的背景色无法正常展示。

解决方案 #

你可以任选以下任意一种方案解决：

• 方案1：快速方案，给.footer添加overflow: hidden触发BFC清除浮动

.footer {
  color: #fefefd;
  background: #191f28;
  overflow: hidden;
}

• 方案2：通用兼容方案，使用clearfix清除浮动，不会出现内容被截断的问题
  首先定义clearfix公共样式：

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

再给你的footer外层div添加clearfix类即可：

<div class="footer clearfix">

• 方案3：现代浏览器专属方案，使用display: flow-root清除浮动，无任何副作用

.footer {
  color: #fefefd;
  background: #191f28;
  display: flow-root;
}

内容的提问来源于stack exchange，提问作者Elias de Carvalho