极客观点
项目管理
HarmonyOS
想做一个左侧固定220px，右侧随屏幕大小自适应的的布局，对于 float的使用 有些困惑，望各位前辈不吝赐教！
<!DOCTYPE html>
<html>
<head>
<title>左侧固定，右侧实现随屏幕宽度大小自适应</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
#left {background-color: green;width: 220px;float: left; }
#content { width: 100%;border: solid red 1px;}
#contentInner {margin-left: 220px;background-color: orange;}
</style>
</head>
<body>
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</body>
</html>
关于float的问题（以下各div块都用其id指代），
如果在left中设置属性margin-top:50px。left会向下移动50px距离，content不动。
但如果是在content中设置属性margin-top:50px，虽然content向下移动了50px的距离，但是left居然跟着一起下去了,这是什么情况？left设置了float:left后不是已经脱离文档流了吗？如果在content中设置float:left后，left又会回到顶上...为什么？
有两个要点。
一是垂直外边距合并。
div#content元素设置了margin-top，由于它和它的父元素（这里就是body）之间并没有间隙（例如border、padding），会发生垂直外边距合并。因此，此时margin-top相当于作用在了body上，所以浮动元素div#left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1px;，这时候就有了间隙，也就不会发生合并。二是浮动元素的特性。浮动元素在垂直外边距合并的规则里，算作有间隙的情况。因此，
div#left元素设置margin-top并不会发生合并。你可以简单看看CSS 外边距合并。
要实现左侧固定，右侧随屏幕大小适应的布局，我认为比较合适的写法是：
css:
如果需要上边距，可以考虑在各部分内部增加div，设置
padding-top。这可以很好的避免垂直外边距合并带来的困惑。