父类margin未约束子元素：为何浮动按钮受margin-top影响？

这个问题其实是CSS里经典的**外边距折叠（Margin Collapse）**结合浮动元素特性导致的，我来给你拆解清楚：

核心原因 #

当你给按钮设置了float: left后，这个按钮就脱离了正常的文档流——父元素默认无法感知到浮动元素的存在，会出现高度塌陷的情况（父元素高度变成0，完全包裹不住按钮）。

同时，你的父元素没有设置任何能阻断外边距折叠的属性（比如border、padding、overflow等），这时候父元素的margin-top: 50px就会和浮动子元素的“虚拟外边距”发生折叠。视觉上就表现为：这个50px的外边距好像直接作用在了按钮上，而父元素本身因为高度塌陷，看起来紧贴着页面顶部。

验证你的代码 #

你提供的按钮样式里没有设置margin，但因为它是浮动状态，加上父元素没有任何包裹它的属性，父元素的margin-top就直接“穿透”到了按钮上，造成了你看到的现象。

解决方法 #

你只需要给父元素添加能触发BFC（块级格式化上下文）的属性，或者清除浮动，就能阻断外边距折叠并让父元素正常包裹浮动按钮：

方法1：触发BFC（推荐） #

给父元素添加以下任意一个属性即可：

• overflow: hidden;（最简单的方案，适合大多数场景）
• display: flow-root;（现代浏览器支持的标准方案，无副作用）
• border: 1px solid transparent;（如果不介意细微的边框高度变化）
• padding-top: 1px;（同样能阻断折叠，注意会增加父元素的内边距高度）

方法2：清除浮动 #

给父元素添加清除浮动的伪元素，强制父元素包裹浮动子元素：

.parent::after {
  content: "";
  display: table;
  clear: both;
}

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