div容器内添加h1元素导致位置下移问题求助

嘿，我来帮你搞定这个容器移位的问题！你遇到的情况其实是前端布局里很常见的两个小坑导致的，咱们一步步拆解：

为什么添加<h1>后容器会下移？ #

主要有两个核心原因：

1. Inline-block的默认垂直对齐规则 #

你给#left和#right设置了display: inline-block;，但这类元素的默认垂直对齐方式是baseline（基线对齐）。当#left是空容器时，它的基线就是元素底部；可一旦你往里加了<h1>，<h1>的内容会把#left的基线拉高，这时候#left和#right就会跟着新的基线对齐，直接导致整体布局下移。

2. <h1>自带的默认外边距 #

浏览器的默认样式表（也就是咱们常说的user agent stylesheet）会给<h1>设置默认的上下外边距（比如margin-top: 0.67em、margin-bottom: 0.67em）。这些外边距可能会和容器的布局产生「外边距折叠」，进一步放大移位的问题。

怎么修复？ #

针对这两个问题，咱们用两步就能解决：

第一步：强制inline-block元素顶部对齐 #

给#left和#right加上vertical-align: top;，让它们始终以顶部为对齐基准，不管容器里有没有内容，都不会乱移位：

#left, #right { 
  display: inline-block;
  vertical-align: top; /* 新增这行，固定对齐方式 */
}

第二步：清除<h1>的默认外边距（或触发BFC） #

你可以二选一：

• 方式一：直接重置<h1>的margin
  把<h1>的默认外边距清掉，避免它干扰容器布局：

  h1 {
    margin: 0; /* 清除默认上下外边距 */
  }
  

• 方式二：给容器触发BFC
  给#left、#header、#content、#footer加上overflow: hidden;，触发块级格式化上下文（BFC），阻止外边距折叠：

  #left, #header, #content, #footer {
    overflow: hidden; /* 触发BFC，解决外边距折叠 */
  }
  

把这两步做完，你再往容器里加<h1>，布局就不会乱跑啦！

内容的提问来源于stack exchange，提问作者Quốc Cường