想要让b距离顶部，为什么a会跟着一起

三个盒子a,b,c;b在a里面，我调了b的margin-top为300px,想要让b距离顶部300，但是为什么a会跟着一起动？
代码
  <style>
        *{
            padding: 0;
            margin: 0;
        }
        .c{
            position: fixed;
            width: 100%;
            height: 80px;
            top: 0px;
            background-color: green;
        }
        .a{
           
            width: 700px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 200px;
        }
       
    style>
head>
<body>
     <div class="c">div>
     <div class="a">
        <div class="b">div>

     div>
     
body>
运行结果及报错内容

img

触发bfc了，b在a里面，所以margin-top向上传递了

https://blog.csdn.net/qq_51066068/article/details/123895931

最简单的给a加一个padding-top:1px