极客观点
项目管理
HarmonyOS
代码如下，有两点不懂的地方，如果有懂的大佬，求帮助，感激不尽。
1.如果margin-left的负值不是百分比，不断改变它的值，当它的值小于-200px后，left块移到了center块的右上角，并没有移动到浏览器的右上角。为什么left块不会移动到浏览器的右上角呢？
2.而不断减小margin-right的负值，当它的值小于-150px后，right块移动到了浏览器右上角，再改变它的值，right块的位置也不会发生变化。为什么呢？不断减小margin值时，为什么right块不像left块一样从center块的右上角开始移动呢？而是从浏览器右上角开始移动。
我知道margin的left值和top值是跟前面元素的位置有关，而right和bottom是影响后面的元素位置。上面两个疑问还是不理解，查了很多资料也没找到答案。
（关于margin的参考线，left和top是以外元素为参考，right和bottom是以自身的元素为参考。
top负值就是以包含块内容区域的上边或者上方相连元素 margin 的下边为参考线;
left负值就是以包含块内容区域的左边或者左方相连元素 margin 的右边为参考线;
right负值就是以元素本身border的右边为参考线；
bottom负值就是以元素本身border的下边为参考线；）<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main {
padding: 0 150px 0 200px;
}
.main div {
float: left;
height: 300px;
}
.center {
width: 100%;
background-color: pink;
}
.left {
background-color: skyblue;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
background-color: purple;
width: 150px;
margin-right: -150px;
}
</style>
</head>
<body>
<div class="main">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
float属性会让元素脱离文档流，导致父元素高度塌陷，但是相邻的三个浮动元素之间的关系类似inline-block，所以在没有margin负值的时候如果父元素宽度不够，会折行显示；
给其中某个加了负margin时，会相对于父容器进行负方向偏移，在负margin的值比较小时，其有一部分已经偏移出了父容器，
另一部分还占据着父容器的宽度，直至它的负margin增大到完全偏移出父容器，这时候可以简单理解为已经不占据父容器的宽度了，所以父容器的折行应该是对它不起作用了，
这个过程你可以在这里演示一下，把.left的margin-left逐渐从200递减-300看下效果
https://codepen.io/cs24k1993/...
对于它内部的实现机制我也不是很了解，可以参考下这个问题
https://segmentfault.com/q/10...
另外，css相关的问题都可以去张鑫旭的博客找找，他对css研究比较深
css-tricks也很不错