首次搭建网站：添加margin后右侧列下移，求布局修复方案

你遇到的问题本质是浮动布局的宽度溢出：.columnLeft占70%宽度，.columnRight占30%，加上50px的margin-left后，两列的总宽度（70% + 30% + 50px）超过了父容器的100%宽度，所以右侧列被挤到下一行。

下面给你三种可行的修复方式，从兼容旧场景到现代布局：

方案1：用calc计算宽度（兼容旧浏览器） #

直接调整右侧列的宽度，把margin的空间从宽度里扣除，保证总宽度不超过100%：

.columnLeft {
  float: left;
  width: 70%;
  margin-top: 50px;
}

.columnRight {
  float: right;
  width: calc(30% - 50px); /* 从30%宽度里减去50px的margin空间 */
  margin-top: 50px;
  margin-left: 50px;
}

另外注意：你代码里的.row:after设置display:grid是错误的，清除浮动的伪元素需要是块级元素且加content，改成：

.row:after {
  content: "";
  display: block;
  clear: both;
}

方案2：拆分间距到两边（视觉更平衡） #

如果不想让右侧列变窄，可以把50px的间距拆成左右各25px，分别给两列加margin，同时用calc调整宽度：

.columnLeft {
  float: left;
  width: calc(70% - 25px);
  margin-top: 50px;
  margin-right: 25px;
}

.columnRight {
  float: right;
  width: calc(30% - 25px);
  margin-top: 50px;
  margin-left: 25px;
}

方案3：改用Flex布局（推荐，现代布局方式） #

浮动布局是较老旧的方案，改用Flex可以彻底避免这类宽度计算问题，直接用gap设置间距：

/* 替换原来的.row相关样式 */
.row {
  display: flex;
  gap: 50px; /* 直接定义两列之间的间距 */
  margin-top: 50px;
}

/* 替换原来的.columnLeft和.columnRight样式 */
.columnLeft {
  flex: 7; /* 按7:3的比例分配容器空间 */
}

.columnRight {
  flex: 3;
}

/* 无需再写float、width和margin-left/margin-right */

这种方式更简洁，也不会出现浮动布局的各种兼容问题，是当前主流的布局方案。

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