CSS浮动响应式网格移除div调试边框后列元素重叠 如何保持列固定对齐

你遇到的“加绿色边框就布局齐整、移除边框列就互相碰撞堆叠”，根本不是float、clear、overflow属性写得不对，是两个细节问题叠加出来的：

• 当初调试时给所有div加的1px绿色边框，在浏览器默认的content-box盒模型规则下，是实打实占用元素水平空间的。你当时看到的“正常布局”，是把边框占的宽度也算进去的视觉效果，不是你写的网格代码真正的渲染结果。
• 你现在的网格列混合了div和span元素，给span加左浮动的同时，既没有给所有列统一盒模型计算规则，也没有给不同宽度的列类设置显式宽度值。移除临时边框之后，元素实际占用的水平空间和你当初调试的视觉预期完全对不上，浮动元素自然就会错位挤在一起。

不用换成flex或者grid，按下面几步改就能解决问题：

• 全局统一盒模型，从根源上避免宽度计算被边框、内边距干扰
  加这段全局规则，所有元素的宽度计算都把边框、内边距包含进去，不会再因为加个边框就额外撑大元素：

  * {
    box-sizing: border-box;
  }
  

  这是解决你当前问题的最关键一步——之前你靠临时边框凑出来的整齐布局，本质就是没统一盒模型，算宽度的时候漏算了边框占的空间。
• 给每类网格列补上显式宽度，别让列靠内容撑开
  你贴的代码里完全没有.span-1-of-7、.span-2-of-7这些类的宽度定义，浮动的span元素如果不设置明确宽度，只会按自身内容的宽度收缩，所有元素挤在最左侧自然就会出现堆叠碰撞。
  参考你现在的margin规则（每列左侧1.4%间距），对应的宽度值可以这么写，记得把行内第一列的左边距清零，不然整行会因为第一列的额外边距超宽：

  /* 第一列不需要左边距，避免额外占空间 */
  .row .col:first-child {
    margin-left: 0;
  }
  .span-1-of-7 {
    width: calc((100% - 6 * 1.4%) / 7);
  }
  .span-2-of-7 {
    width: calc((100% - 6 * 1.4%) / 7 * 2);
  }
  

• 补全行容器的清浮动兼容逻辑
  你现在写的.row:after { clear: both }本来是对的，但给.row加上zoom:1属性兼容老IE，避免.row因为全是浮动子元素、高度塌缩带来的布局错位：

  .row {
    zoom: 1;
  }
  

• 把临时调试边框从全局div选择器里挪走
  别再用div { border: 1px solid green }的方式加调试样式了，下次很容易不小心把边框算到实际宽度里，重复踩现在的坑。可以把调试样式单独做成类，用的时候给.row加上就行，用完直接删掉：

  .debug * {
    border: 1px solid green;
  }
  

你之前反复改float、clear、overflow的时候，没碰到核心变量：每一列的实际水平宽度和你预期的数值对不上。浮动布局的排列逻辑完全依赖元素的实际宽度——如果同行所有列的实际占用宽度加起来刚好等于.row的内容区宽度，自然会整整齐齐排在一行；如果宽度算错了，不管怎么调浮动相关的属性，都只会越调越乱。

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