设置文本margin-top时连带左侧浮动图片下移，如何仅让样式作用于文本

问题原因 #

浮动元素只会让后续元素的文本内容产生环绕效果，而后续块级元素（这里是h1标签）本身的盒模型仍会占据父容器的整行宽度，所以给h1设置margin-top时，边距是相对于父容器.container3_div的顶部计算的，会同步撑开父容器顶部的间距，看起来就像左侧浮动图片也跟着下移了。

解决方案 #

方案1：触发BFC（最小改动适配原有浮动布局）

给文本元素触发BFC（块级格式化上下文），BFC的规则是内部区域不会和外部浮动元素重叠，此时设置的margin-top只会作用于文本元素本身，不会影响浮动图片。修改.apple_header的CSS即可：

.apple_header {
  font-size: 3rem;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  color: #1d1d1f;
  /* 新增以下代码 */
  display: flow-root;
  margin-top: 2rem; /* 按需调整向下偏移的数值即可 */
}

方案2：改用Flex布局（更推荐的现代布局方案）

直接放弃浮动布局改用Flex，后续调整对齐、间距的灵活性更高，完全不会出现浮动带来的诡异布局问题。修改对应CSS如下：

.container3_div {
  margin: 7rem;
  /* 新增以下代码 */
  display: flex;
  align-items: flex-start; /* 子元素顶部对齐 */
  gap: 2.5rem; /* 图片和文本之间的间距，按需调整 */
}

.phone_app {
  width: 30rem;
  /* 删除原有float: left属性 */
}

.apple_header {
  font-size: 3rem;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  color: #1d1d1f;
  /* 此处设置的margin只会作用于文本本身 */
  margin-top: 2rem;
}

内容的提问来源于stack exchange，提问作者João Silva