css中有关负边距（negative margin）的一个问题？_Html5_论坛

css中有关负边距（negative margin）的一个问题？

赵***2 分类：Html5 人气：958 回帖：1 发布于6年前收藏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin:0;
            font-size:5em;
        }

        .a,.b,.c{
            width:200px;
            height:200px;
        }

        .a{
            background-color: red;
            width:100%;
            float:left;
            
        }

        .b{
            background-color: green;
            width:100%;
            float:left;   
        }

        .c{
            background-color: yellow;
            float: left;
            /*margin-left:-100%;*/
        }
    </style>
</head>
<body>
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c">c</div>      
</body>
</html>

代码如上，在浏览器中显示如下：

如果给方块C添加margin-left:-100%，效果如下：

方块C移动到了绿色部分，看了相关博文了解负边距是能够移动添加了float属性的元素，这还能理解，但如果把-100%改成-200%，我以为可以让方块C再移上去到红色部分，但却没有，似乎移到了绿色部分的左边而且到了屏幕外，这是为什么? 如图：

标签：css html5

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv5 码农

龙***6 UI设计师 6年前#1

float 是很怪异的一个css属性，也是新手常犯迷糊的一个属性。页面元素添加该属性后，该元素会从页面上“飘”起，然后其父级元素高度归零(即脱离文档流)，这是常见的浮动效果。但实际使用中，它貌似是只影响上一行结构的。
你的代码, 如果给 .c 继续添加 margin-top: -200px; 的话，就可以实现 .c 叠加在 .a 上了。

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取