菜鸟初学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的效果:
图片说明
不设置的效果:
图片说明

3个回答

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

            <div class="clear"></div>
u011233710
早稻城 是初学者,可是我没用div啊,这怎么理解
大约 2 年之前 回复

没说清楚,是指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>
u011233710
早稻城 回复早稻城: 已解决,谢谢
大约 2 年之前 回复
u011233710
早稻城 是的不好意思,就是设置body的float,是这样的我也觉得这样不太好就又在div里面写了一个结果就是div和其他元素都设置的float,但是div整个块还是游离在body的边框之外,这样写也是会对后来的元素布局造成影响,所以有什么比较好的解决办法
大约 2 年之前 回复

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

2
android studio 更新后的毛病。。。。
1
用SQLite做个一个简单的登陆注册功能,在注册时崩溃了
2
做一个安卓实验,读取通讯录并添加联系人。在添加联系人的时候,发现添加的联系人信息是空的!
1
jqGrid使用treeGrid 每次点击ExpandColumn都发送一个新请并不展开对应子节点
12
jsp页面向后台提交的数据如何转换类型
4
求教:jsp中使用ckeditor显示不出来搞了很久。。
9
请教前端大佬esayUI问题,怎么把一个href通过用户权限条件隐藏或者置为不可选择.....
2
Toolbar menu:*.Resources$NotFoundException
3
安卓Toolbar如何使用?toolbar使用显示全屏
7
前端获取不到值得问题,跟web有关,后台是Java
4
ckeditor5 图片上传问题,求大神讲解下,谢谢
4
开机启动,隐藏APP图标,安装apk点击打开无响应
1
angular material这个mat-card如何对齐?
2
用ExtJs6.0写的,升级到6.2之后gridpanel滑动时就会卡顿,代码如下,求解决
3
新人使用DrawerLayout遇到一点小问题,求助大神
3
Qt designer设计菜单,打开文件对话框,编写好逻辑后,点击打开文件,没弹出对话框,且程序退出
1
帮我运行一下PYQT5的界面代码,点击菜单中的打开,看是否弹出文件对话框
2
安卓toolbar的标题名字,跑到手机屏幕的中间去了,我设置的高度明明是wrap
1
bootStrap中服务器分页以后,下面分页按钮消失了,其余数据正常
1
android 新建项目加toolbar菜单不显示,求高手解答