老师,清楚浮动后为什么成纵向排列

老师,清楚浮动后为什么成纵向排列

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .per{

            width: 300px;

            height: auto;

            border:2px solid #aaa;

        }

        .li{

            width: 100px;

            height: 100px;

            background: red;

            margin: 5px;

            float: left;

            clear:both;

        }

       .per{overflow:hidden;}

    </style>

</head>

<body>

    <div class="per">

        <div class="li"></div>

        <div class="li"></div>

        <!-- 此处写代码 -->

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

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

2回答
好帮手慕慕子 2019-04-16 09:57:36

同学你好, 因为同学这里为.li元素添加了clear属性, 导致没有横向排列, 建议:删除为li设置的clear属性

http://img1.sycdn.imooc.com//climg/5cb5367e0001055403790348.jpg

如果帮助到了你, 欢迎采纳

祝学习愉快~~~

Steve007 2019-03-18 16:43:48

同学,你好。块级元素默认的文档流就是从上到下排列的,清楚浮动后,元素会回归到正常的文档流,因此清楚浮动后,会纵向排列。

祝学习愉快!

  • 不明白,块级元素不是从左到右再从上到下吗?而且练习题的效果图也应是横向排列的呀
    2019-04-16 09:23:00
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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