这里有两个p, 都向左浮动，其中sub 设置了margin-left:-100%; 请问为何会出现这样的效果，sub能够占据到main上面。
在线demo:
http://codepen.io/anon/pen/zvJeNG
请问这个负边距有何妙用，为何-100% 和 -190px（p的宽度）效果截然不同呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p class="main">
this is main</p>
<p class="sub">
this is sub
</p>
</body>
</html>.main{
float:left;
width:100%;
background-color:aqua;
}
.sub{
float:left;
width: 190px;
margin-left:-100%;
background-color:black;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
When the margin value is a percentage, it is calculated equivalent to the width of the containing block of the element
The .sub margin-left:-100% of 100% here is calculated relative to the width of the sub’s containing block body
which is the width of the body
And -190px is just 190 pixels
1. Both p's are set to left floating. When the width of the body is enough for them to be lined up together, they will definitely be lined up in the same line.
2. Sub is set to -100%. This 100% is relative to the width of its parent element body, which means it is equal to the width of the body. Therefore, it returns to the far left, and the width of sub is 190px. , that is, arranging from the far left, which is the current style.