使用响应式网格系统CSS文件，project-box边框无法包裹列求助

为什么边框只显示顶部？ #

大概率是你的网格系统里的.col类用了float: left来实现多列布局——当子元素设置浮动后，父容器.project-box如果没有处理浮动，就会触发高度塌陷：父容器无法感知到浮动子元素的高度，自身高度会被压缩到几乎为0，所以红色边框就只能看到顶部那一小条，没法包裹住内部的两列内容。

几种靠谱的解决方法 #

1. 用CSS3的display: flow-root（最简洁无副作用）

这是专门为解决浮动塌陷设计的属性，兼容性很好（除了IE），直接给.project-box加上就行：

.project-box {
  border: 1px solid red;
  display: flow-root;
}

不需要额外的HTML结构，直接修复高度塌陷，边框就能完整包裹两列了。

2. 经典 clearfix 清除浮动（兼容所有浏览器）

如果需要兼容老版本IE，可以用clearfix技巧，先定义一个清除浮动的类，再给.project-box加上：

/* 定义clearfix工具类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后修改HTML：

<div class="row">
  <div class="project-box clearfix">
    <div class="col span-1-of-2">
      <p>...的内容</p>
    </div>
    <div class="col span-1-of-2">
      <p>...的内容</p>
    </div>
  </div>
</div>

这个方法不会影响其他布局，是多年来的主流解决方案。

3. 触发BFC的其他方式

除了上面两种，还可以通过给.project-box添加以下属性来触发BFC（块级格式化上下文），从而包含浮动子元素：

• overflow: hidden;：注意如果子元素有超出父容器的内容（比如下拉菜单），会被裁剪，需要确认是否影响你的布局
• float: left;：但这样会改变.project-box本身的布局行为，可能需要调整其他样式，谨慎使用

小提示 #

优先推荐display: flow-root，代码最简洁且没有副作用；如果要兼容老IE，就用clearfix方案。你可以先试试第一种，应该马上就能看到边框完整包裹住两列啦～

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