3-5 img标签设置浮动后为什么不会到页面顶端上去

3-5 img标签设置浮动后为什么不会到页面顶端上去

img标签设置浮动后为什么不会到页面顶端上去,不是说设置浮动会脱离文档流吗?我没清除浮动,怎么不会浮到顶端去

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>慕课网</title>
    <style type="text/css">
     *{
     margin: 0;
     padding: 0;
     }
     .content{
     width:810px;
     margin: auto;
     padding: 10px;
     font-family: "微软雅黑";
     line-height: 24px;
     border: 2px solid rgb(235,235,235);
     }
     .img01{
     margin: 10px;
     float: left;
     }
     .img02{
     margin: 10px;
     float: right;
     }
    </style>
</head>
<body>
    <div class="content">
        <img src="http://img1.sycdn.imooc.com/climg//59c8742e0001bc9607120172.jpg" alt="" class="img01">
        &nbsp;&nbsp;慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>
        &nbsp;&nbsp;慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言,包括基础课程、实用案例、高级分享三大类型,适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点,为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>
        &nbsp;&nbsp;4月2日,国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解,在此次上线的版本中,慕课网新增了课程历史记录、相关课程推荐等四大功能,为用户营造更加丰富的移动端IT学习体验。<br/><br/>
        <img src="http://img1.sycdn.imooc.com/climg//59c874560001779307120172.jpg" alt="" class="img02">
        &nbsp;&nbsp;老师来自于各大IT公司重要技术岗位,拥有丰富的实战经验。语言平实、通俗易懂,更接地气,传授最有价值的经验之谈。课程内容注重实用性,不仅让学员通过学习能够做出产品,而且学习过程中掌握的方法技巧在实际工作中用得上,能够切实帮助学员提升工作技能。<br/><br/>
        &nbsp;&nbsp;慕课网的绝大多数课程都经过了专业的后期制作,为课程内容匹配了个性化的视觉效果,帮助学员更好地理解课程内容,增加学习的乐趣。
    </div>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

浮动的块虽然脱离的正常的文档流,但是还会占有正常文档流的文本空间

  • 请问,这个例子是图片元素,如果是div元素,两个div都设置左浮动,脱离文档流,空间不在,紧接着下面的div元素自动排到顶层,效果上被遮盖。就像第3节浮动演示,请问怎么解释?
    2018-06-08 14:07:27
  • 人土土zzzzz 提问者 #2
    非常感谢!
    2018-06-08 14:21:07
  • 人土土zzzzz 提问者 #3
    就是浮动的标签遇到文本会停止浮动。
    2018-06-08 14:23:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师