修改单行width属性导致整个div上移，CSS堆叠布局失效如何解决

问题原因 #

1. 高度溢出：你当前给.column4设置的固定高度为39vh，两个.column4的高度总和已经达到78vh，再加上.column5的39vh，三个盒子总高度达到117vh，远大于父容器#box设置的80vh总高度。你把前两个盒子宽度改成100%后，两个盒子从横向并排变成纵向各占一行，总高度直接超出父容器限制，自然会打乱布局。
2. 浮动布局缺陷：你用了float: left实现并排布局，但没有给父容器.row做浮动清除，也没有设置.row的高度，浮动元素会脱离正常文档流，导致父容器高度塌陷，所以修改宽度后会出现整个div上移的问题。

解决方案 #

推荐用更简单的Flex布局替代浮动布局，修改代码如下：

1. 给父容器.row添加Flex相关样式：

.row {
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 删除.column4和.column5里的float: left属性，将.column4的宽度改成100%，同时可以把三个盒子的固定高度改成弹性分配，避免溢出：

.column4 {
  width: 100%;
  /* 删掉原有float: left属性 */
  flex: 1; /* 自动分配高度，不需要固定39vh */
  padding: 10px 50px; /* 可根据需要调小上下padding避免内容溢出 */
  /* 其他原有属性保留 */
}
.column5 {
  /* 删掉原有float: left属性 */
  flex: 1;
  /* 其他原有属性保留 */
}

如果要保留固定高度，只需要把三个盒子的高度总和控制在80vh以内即可。

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