span标签为啥加了float后变的不占行了?

没加之前

img

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    *{padding:0;margin:0;}
    span{
    background:red;
        margin-left:5px;
    }
    .c1{width:50px;
    height:50px;
    background:blue;}
    .c2{width:200px;
        height:50px;;
    background:green;}
</style>
</head>

<body>
    <div class='c1'></div>
    <span>123</span><span>798</span>
    <div class='c2'></div>
    
</body>

</html>

加了之后

img


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    *{padding:0;margin:0;}
    span{
    background:red;
        margin-left:5px;
        width:auto;
        height:auto;
        float:left;
    }
    .c1{width:50px;
    height:50px;
    background:blue;}
    .c2{width:200px;
        height:50px;;
    background:green;}
</style>
</head>

<body>
    <div class='c1'></div>
    <span>123</span><span>798</span>
    <div class='c2'></div>
    
</body>

</html>

float会让元素浮动，不单独占行

是不是加了之后span脱离了文档流(0.0)？