菜鸟初学CSS_float: 如果不设置float，toolbar将不会在body里面，求解为什么？

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
                <style>
            body 
{
    background-color:white;
    color:black;
    border:2px solid red;
    float:left;
}
ul 
{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
a 
{
    width:7em;
    color:white;
    background-color:black;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    text-align:center;
    float:left;
}
a:hover {background-color:gray;}
li {display:inline}
        </style>
    </head>
    <body>
        <base target="_blank">
        <ul>
            <li><a href="https://www.baidu.com">Baidu</a></li>
            <li><a href="https://www.taobao.com/">TaoBao</a></li>
            <li><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
            <li><a href="http://www.bootcss.com/">Bootstrap</a></li>
        </ul>

    </body>
</html>

对

设置float的效果：
图片说明

不设置的效果：

一看你就是初学者一定要切记使用完float要clear

            <div class="clear"></div>

没说清楚，是指body的float吗？
body 元素定义文档的主体,布满整个页面。
加了float就不是了，变成浮动以后就会自动根据内部的元素而变化。
还有就是不要直接在body写样式，大部分情况下用一个div来代替。

<body>
     <div class="containe">
        <ul>
            <li><a href="https://www.baidu.com">Baidu</a></li>
            <li><a href="https://www.taobao.com/">TaoBao</a></li>
            <li><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
            <li><a href="http://www.bootcss.com/">Bootstrap</a></li>
        </ul>
   </div>
</body>

加上float就会脱离文档流像你这个只需要给li加float 最后加个 div clear 或者 li:list-type-of:after 伪类 clear 或者父元素（你的ul）给个height 也是可以的