为何CSS布局元素位置不符合预期？float设置与顶部间距问题求解

修复方案 #

直接对现有CSS做以下修改即可解决全部问题：

• 给广告外层容器添加左浮动，同时补充相对定位解决内部按钮错位问题（这是线上环境布局异常的核心诱因，原有代码内部按钮使用绝对定位但父容器未设置相对定位，会导致按钮相对于整个页面而非广告容器计算位置）：

#aff-ad {
  width: 336px;
  height: 280px;
  display: inline-block;
  border: 1px solid #e6e7e8;
  border-radius: 3px;
  background-color: #fff;
  /* 新增两行 */
  float: left;
  position: relative;
}

• 去除Ads文字顶部多余间距，清除默认边距和行高带来的额外空隙：

.aff-ad-label { 
  float: right;
  color: #bababa;
  font-family: arial, sans-serif;
  font-size: 8px;
  font-weight: 500;
  /* 修改margin、新增行高设置 */
  margin: 0 2px 0 0;
  line-height: 1;
  text-transform: uppercase;
}

• 补充标题清除浮动规则，避免和上方浮动的Ads标签产生边距折叠导致布局偏移：

.aff-ad-title {
  margin-left: 23px;
  margin-right: 23px;
  font-family: arial, sans-serif;
  font-size: 26px;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.79);
  font-weight: 700;
  margin-top: 42px;
  margin-bottom: 12px;
  /* 新增清除浮动 */
  clear: both;
}

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