块元素的margin-top对相邻float元素的位置影响？

Question

块元素的margin-top对相邻float元素的位置影响？

韩广智

11

发布于
2023-06-12 台湾

robin

1.6k11140

更新于
2023-06-12

新手上路，请多包涵

题目描述

块元素的margin-top对相邻float元素的位置影响：
有两个相邻块元素，box1设置float，不设置margin-top；box2设置margin-top，然后调整box2的margin-top值，可以看到box1跟随box2上下移动。
请问是什么原理啊？

相关代码

<!DOCTYPE HTML>
<HTML>
    <head>
        <title>test</title>
        <style>
            .box{
                width:100px;
                height:100px;
            }
            .box1{
                background-color:red;
                float:left;
                margin-top:0px;
            }
            
            .box2{
                background-color:blue;
                margin-top:100px;
                margin-left:100px;
            }
            
        </style>
    </head>
    <body>
        <div class="box box1"></div>

        <div class="box box2"></div>
    </body>
</HTML>