为什么加了float后蓝色覆盖红色右下方了?

为什么加了float后蓝色覆盖红色右下方了?


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        padding: 0;

        margin: 0;

    }

        .blue{

            width: 100px;

            height: 100px;

            background: blue;

            /*在此处添加相应代码*/

            float:left;

            position:relative;

            top:50px;

            left:50px;

        }

        .red{

            width: 100px;

            height: 100px;

            background: red; 

            

        }

    </style>

</head>

<body>

    <div class="blue"></div>

    <div class="red"></div>

</body>

</html>


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

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

1回答
好帮手慕柯南 2019-08-09 17:42:03

同学你好!原因是因为添加float之后蓝色区域脱离了文档流,所以红色区域的位置不再受蓝色区域影响因此红色区域在文档流中为第一个元素。所以看起来到了页面的左上角。导致了蓝色覆盖红色右下方

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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