第一个div设置float后的margin-top为何不以body为基准

还有第二个div的文字被独自留在下面了呢？
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>float</title>
            <style type="text/css">
            *{padding: 0;
margin: 0}
.test1{
width: 100px;
height: 100px;
background:red;
float: left;

margin:10px; 
}
.test2{
width: 100px;
height: 100px;
background:green;
float:;
line-height:100px;
margin:10px; 
}

            </style>
        
    </head>
    <body>
        
            <div class="test1">1</div>
            <div class="test2">23434</div>
        
    </body>
</html>

weibo_飞来云去_0 2017-07-26

源自：float浮动 2-1 float基本参数的介绍

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-07-26 10:50:36

1、没明白你的“margin-top为何不以body为基准”这个问题。

2、元素浮动后不会占据文字空间的，所以会出现这种情况。

W3C里面关于浮动的各种情况阐释的很详细，可以去看一下！

祝学习愉快！

收起回答

weibo_飞来云去_0 提问者 #1

第一个设置了浮动向左，第二个不浮动，同时第一个给设置了margin为10px，在全局设置了padding和margin为0的情况下，第一个div应该左上都不该是10px吗，显示的效果看上是20px，因为看到了绿色的部分

2017-07-26 11:04:12