如何保留浮动元素间空白？解析元素错位问题

场景1：容器缩小时的空白折叠与怪异对齐 #

我有一个容器，里面的span元素设置了float:left，元素间用.spc元素做空白间隔。当容器尺寸足够时，空白正常显示；但容器过小无法容纳所有元素时，空白会被挤到下一行，还出现怪异的对齐问题。

示例代码：

.root {
  display:inline-block;
  background-color:lightgray;
  width:200px;
  margin:50px;
}

body>div:nth-of-type(2){
  width:180px;
}

.item {
  float:left;
  border:1px solid gray;
  padding:2px 5px;
  background-color:white;
  white-space:nowrap;
}
.spc {
  float:left;
  display:inline-block;
  width:20px;
  height:1px;
  background-color:blue;
}

<div class=root>
    <span class=item>item a1</span>
    <span class=item>item a2</span>
    <span class=spc></span>
    <span class=item>item b1</span>
</div>  

<div class=root>
    <span class=item>item a1</span>
    <span class=item>item a2</span>
    <span class=spc></span>
    <span class=item>item b1</span>
</div>  

问题原因 #

这是浮动元素的布局规则导致的：

• 浮动元素会优先占据当前行的可用空间，当一行放不下时，会向下寻找能容纳自己的位置
• .spc元素高度仅1px，容器缩窄后，item a2和.spc的总宽度超过容器剩余空间，.spc被挤到下一行
• 后续的item b1是浮动元素，会对齐到上一行中最高元素（item a2）的底部，而.spc因高度极小，视觉上就呈现出“怪异对齐”的效果

完善后的动态示例 #

我进一步做了动态生成元素的示例，空白区域支持样式和点击事件：

var rainbow=['red','orange','yellow','green','blue','indigo','violet'];
var $=v=>document.querySelector(v);
var root=$('#root');
var item=$('.item');
item.remove();
var spc=$('.spc');
spc.remove();

var data ={
  a:2,b:1,c:1
};
update();

function update(){  
  Object.keys(data).forEach((key,i)=>{
    for(var j=0;j<data[key];j++){
      var nitem=item.cloneNode();
      nitem.textContent='item '+key+j;
      root.append(nitem);
    }      
    var nspc=spc.cloneNode(true);
    let col=rainbow[i];
    nspc.style.backgroundColor=col;
    nspc.onclick=e=>alert(`i hope you have a ${col} day`);
    root.append(nspc);
  });
}

#root {
  display:inline-block;
  background-color:lightgray;
  width:250px;
  margin:50px;
  vertical-align:top;
  padding:5px;
}

.item {
  float:left;
  border:1px solid gray;
  padding:2px 5px;
  background-color:white;
  white-space:nowrap;
  margin:2px;
}

.spc {
  float:left;
  display:inline-block;
  width:20px;
  background-color:lightblue;
  border:1px solid transparent;
  padding:2px 5px;  
  margin:2px;
  cursor:pointer;
}

<div id=root>
    <span class=item>item a1</span>
    <span class=spc>&nbsp;</span>
</div>

SPA开发中的布局需求与CSS特性设想 #

作为单页应用（SPA）开发者，这类项目的UI需求经常突破标准布局规范。当前浮动布局模型在动态容器尺寸下仍有优化空间，因此我希望CSS能新增一种特性：

• 支持始终显示在元素组之间的margin（水平、垂直方向均可）：不管容器尺寸如何变化，元素组之间的间距始终保持，不会被挤到单独一行，也不会折叠
• 目前示例中空白区域不需要样式或事件，但未来版本可能需要（比如用于选择子元素组）

现有margin方案的局限 #

如果用margin实现组间距，比如给每组最后一个元素设置右margin：

.itemX:last-of-type {
    margin-right:20px;
}

但这个方案的问题很明显：必须为不同组的元素创建不同的类，动态生成元素时需要额外维护类名，灵活性不足。

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