margin-top不工作与clear：两者 [英] margin-top not working with clear: both

问题描述

 < div style =float：left;>左< / div>< div style =float：right;>右< / div& clear：both; margin-top：200px;>主数据< / div>  

为什么 margin：top 对于Main Data在上面的代码中不起作用？

解决方案

您可以将两个浮动div放入另一个具有overflow：hidden的另一个集：

 < div style ='overflow：hidden'> < div style =float：left;>左< / div> < div style =float：right;>右< / div>< / div>< div style =clear：both; margin-top：200px;> Main Data< / div& code> 
 

为这个5岁的回答添加一点：我认为引起混乱行为的原因是 margin collapse 。使用原始HTML的一个好的技巧是添加一个CSS规则像这样：

  div {border：1px solid transparent ; } 
  

Poof！现在（没有我的额外< div> ）它工作正常！嗯，除了那个额外的像素从边界。特别是，我认为是清除：的工作方式和从代码导致意外布局的边距折叠规则的组合

— 对于完整的（和我认为完全准确的）故事，请参见 Mark Amery的出色答案。细节有一些复杂性，这个答案掩盖了。

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

Why is the margin:top for 'Main Data' not working in the code above?

解决方案

You could put the two floated divs into another one that's got "overflow: hidden" set:

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

edit — To add a bit to this 5-year-old answer: I think the cause of the confusing behavior is the somewhat complicated process of margin collapse. A good trick with the original HTML from the OP is to add a CSS rule like this:

div { border: 1px solid transparent; }

Poof! Now (without my additional <div>) it works fine! Well, except for that extra pixel from the borders. In particular, I think it's a combination of the way that clear: both works and the margin collapse rules that result in the unexpected layout from the code in the OP.

edit again — For the complete (and, I think, completely accurate) story, see Mark Amery's excellent answer. The details have some complexity that this answer glosses over.

这篇关于margin-top不工作与clear：两者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！