<!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>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
</body>
</html>
代码如上,在浏览器中显示如下:
如果给方块C添加margin-left:-100%,效果如下:
方块C移动到了绿色部分,看了相关博文了解负边距是能够移动添加了float属性的元素,这还能理解,但如果把-100%改成-200%,我以为可以让方块C再移上去到红色部分,但却没有,似乎移到了绿色部分的左边而且到了屏幕外,这是为什么? 如图:
float
是很怪異的一個css屬性,也是新手常犯迷糊的一個屬性。頁面元素新增此屬性後,該元素會從頁面上「飄」起,然後其父級元素高度歸零(即脫離文件流),這是常見的浮動效果。但實際使用中,它似乎是只影響上一行結構的。你的程式碼, 如果給
.c
繼續加上margin-top: -200px;
的話,就可以實現.c
疊加在.a
上了。