CSS Grid布局异常：.middle内网格影响相邻.header元素

开发网站时发现，.middle元素的CSS Grid布局会导致相邻.header内的元素移位，修改.middle的第一个margin值即可复现该现象。

问题原因 #

这是**外边距塌陷（Margin Collapse）**导致的：

• .header内部所有元素都使用position: fixed，脱离了文档流，因此.header本身没有高度，属于“空容器”。
• .middle设置的margin-top: 10%会和父元素（body）的外边距合并，最终这个外边距作用在页面顶部，视觉上表现为.header内的固定定位元素被“下移”，实际是页面内容整体下移后，固定元素的相对视觉位置发生了变化。

修复方案 #

以下任意一种方式均可解决：

• 给.header触发BFC
  给.header设置display: flow-root或min-height: 1px，阻止外边距塌陷：

  .header {
    display: flow-root; /* 或 min-height: 1px; */
  }
  

• 替换.middle的margin-top为padding-top
  避免使用顶部外边距，改用内边距实现间距：

  .middle{
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: minmax(150px, auto);
      padding: 15px;
      padding-top: 10%; /* 替换原margin-top */
      margin: 0 auto;
      width: 100%;
      grid-gap: 20px;
  }
  

• 给body添加overflow属性
  给body设置overflow: auto，触发BFC阻止外边距合并：

  body {
    overflow: auto;
  }
  

完整代码示例（以触发BFC方案为例） #

CSS代码

h1 {
    position: fixed;
    top: 0px;
    left: 0%;
    padding: 10px;
    width: 100%;
    background-color: lightgray;
    z-index: -1;
}
li{
    display: inline;
    margin-right: 10px;
}
.nav{
    position: fixed;
    z-index: 10;
    padding:10px;
    width: 15px;
    left: 48%;
}
.friends{
}
.user-post{
    padding-top: 20px;
}
.posts{
    background-color: lightgrey;
}
.post:nth-child(odd){
    background-color: grey;
}

.bottom{
    position: fixed;
    bottom: 0%;
}
.headings{
    position: fixed;
    z-index: 100;
    right: 0%;
}
.header {
    display: flow-root; /* 新增：阻止外边距塌陷 */
}
.middle{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: minmax(150px, auto);
    padding: 15px;
    margin: 10% auto;
    width: 100%;
    grid-gap: 20px;
}

HTML代码

<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="Main_Page.css">
</head>
<body>
    <div class="header">
        <h1 id="top">Search Media</h1>
        <div class="nav">
            <input type="text" placeholder="Search...">
        </div>
        <div class="headings">
            <ul>
                <li><a href="Messages.html">Messages</a></li>
                <li><a href="">Friends</a></li>
            </ul>
        </div>
    </div>
    <div class="middle">
        <div class="user-post">
            <br />
            Create post:<br>
            <textarea id= "create_post"rows="10" cols = "50" name = "post"></textarea><br>
            <input type="submit" value="Post">
        </div>
        <div class="friends">
            <h2 id="friend">Friends</h2>
            <h5>Friend1</h5>
            <p>status: active</p>
        </div>
        <div class="posts">
            <div class="post">
                <h3 id="existing_posts">Posts</h3>
                <p><img src="Example.jpg" alt="manchester" width="50" height="50">This is an example of a post. It will need to be boxed and made so that the name of the user goes above
                    the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
                    functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
            </div>
            <div class="post">
                <h3 id="existing_posts">Posts</h3>
                <p>This is a random bit of text for testing purposes.</p>
            </div>
            <div class="post">
                <h3 id="existing_posts">Posts</h3>
                <p>This is a random bit of text for testing purposes.</p>
            </div>
        </div>
    </div>
    <div class="bottom">
        <p><a href="#header">Return to top</a></p>
    </div>
</body>
</html>

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