为什么html在body中的div设置margin会把float的div也下移，代码见问题详情
<body>
<div></div>
<div style="width:400px; height: 500px; float: left;">left</div>
<div style="width:700px; height: 700px; float: right;">right</div>
<div style="height: 20px;margin-top: 50px;">clear</div>
</body>和
<body>
<div style="width:400px; height: 500px; float: left;">left</div>
<div style="width:700px; height: 700px; float: right;">right</div>
<div style="height: 20px;margin-top: 50px;">clear</div>
</body>
展开
收起
1
条回答
写回答
写回答
-
IT从业有两个要点。
一是垂直外边距合并。div#content元素设置了margin-top，由于它和它的父元素（这里就是body）之间并没有间隙（例如border、padding），会发生垂直外边距合并。因此，此时margin-top相当于作用在了body上，所以浮动元素div#left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1px;，这时候就有了间隙，也就不会发生合并。
二是浮动元素的特性。浮动元素在垂直外边距合并的规则里，算作有间隙的情况。因此，div#left元素设置margin-top并不会发生合并。
你可以简单看看CSS 外边距合并。
要实现左侧固定，右侧随屏幕大小适应的布局，我认为比较合适的写法是：
<body> <div class="l-container"> <div class="l-sidebar"></div> <div class="l-main"></div> </div> </body>css:
.l-container:after{ display: table; clear: both; content: ""; } .l-sidebar{ float: left; width: 220px; } .l-main{ margin-left: 220px; }如果需要上边距，可以考虑在各部分内部增加div，设置padding-top。这可以很好的避免垂直外边距合并带来的困惑。
2019-07-17 19:43:28赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
相关课程
更多
推荐问答
