如何隐藏指定DIV元素且不改变其余元素原有布局位置

要实现隐藏元素但不改动其余元素位置，不能使用display: none——该属性会让元素彻底脱离浮动流，后续浮动元素会自动前移补位，打乱原有布局。
正确方案是给需要隐藏的元素设置visibility: hidden：该属性仅让元素视觉不可见，会完整保留元素原本占据的空间、定位属性，其余元素的位置完全不会发生变动。

CSS样式 #

div{
  width: 10%;
  float: left;
}

HTML结构 #

<div style="background-color: blue; visibility: hidden"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red; visibility: hidden"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>

• 内容为1、3的DIV会完全隐藏，不显示背景色与内部文字
• 两个隐藏DIV依旧占据原有10%宽度的浮动位置，内容为2、4的DIV保持初始加载的位置不变，不会出现前移偏移，完全匹配需求。

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