HTML/CSS设置float:left时如何给div添加上下间距

失效原因 #

• top 是定位偏移属性，仅对position值不为默认static的元素生效，普通静态流元素、仅设置浮动未设置定位的元素，添加top规则不会产生任何效果。
• 浮动元素会脱离标准文档流，父容器如果没有触发BFC清除浮动，会出现高度塌陷（父元素高度计算时不会包含内部浮动子元素的高度），此时直接给父容器添加间距规则会出现表现异常。
• 示例代码本身存在HTML语法问题：<td>是表格单元格标签，必须嵌套在<tr>行标签内，<tr>又必须放在<table>表格标签下，直接在普通div下嵌套td会被浏览器自动重构DOM结构，也可能导致样式不生效。

正确实现方法 #

根据需求选以下任意一种方案即可：

方案1：直接给浮动元素添加上外边距（最简便） #

如果只是需要两个浮动控件距离顶部20px，直接给内部浮动元素加margin-top: 20px即可，不需要修改父元素属性，注意两个浮动元素都要加对应顶部间距，避免错位：

<!-- 先修正不符合规范的表格结构 -->
<table>
  <tr>
    <td>
      <input type="checkbox" name="download" id="download" class="btn btn-primary" value="GetName" style="float: left; margin-top: 20px">
      <label for="download" style="float: left; margin: 20px 0 0 15px;">Download</label>
    </td>
  </tr>
</table>

方案2：父元素清除浮动后添加内边距 #

如果需要给父容器统一加顶部间距，先给父元素添加清除浮动的规则触发BFC，解决高度塌陷问题后再加padding-top: 20px即可：

<style>
/* 通用清除浮动类 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.download-cell {
  padding-top: 20px; /* 父容器统一加顶部内边距 */
}
</style>

<table>
  <tr>
    <td class="clearfix download-cell">
      <input type="checkbox" name="download" id="download" class="btn btn-primary" value="GetName" style="float: left">
      <label for="download" style="float: left; margin-left: 15px;">Download</label>
    </td>
  </tr>
</table>

非特殊场景不推荐：给元素加相对定位后用top偏移 #

如果一定要用top属性实现偏移，需要给对应元素添加position: relative，让top属性生效，但这种方式不会改变元素在文档流中的占位位置，容易引发后续布局错位：

.float-element {
  float: left;
  position: relative;
  top: 20px;
}

核心注意点 #

• 常规流布局的间距优先用margin（控制元素和外部元素的距离）、padding（控制元素内容和自身边界的距离）实现，不要滥用定位属性做基础间距
• 只要父容器内存在浮动子元素，必须先给父容器清除浮动，否则所有和父容器高度、内外边距相关的样式都可能出现异常
• 写HTML时要严格遵守标签嵌套规则，非法的标签嵌套会被浏览器自动修正DOM结构，导致样式、JS逻辑出现预期外的问题

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