Css 页边距顶部不'；尽管清楚，但在浮动元素之后不工作：两者

考虑以下几点：

<div style='float: left; width: 50%'>content</div>
<div style='float: right; width: 50%'>content</div>
<div style='clear: both; margin-top: 50px'>content</div>

内容
内容
内容

---

为什么保证金上限在这里不起作用？第三个元素仍然粘在前两个元素上。

您需要尝试将

边距底部添加到浮动中

或者您可以尝试添加

<div style='overflow:hidden'>
<div style='float: left; width: 50%'>content</div>
<div style='float: right; width: 50%'>content</div>
<div style='clear: both; margin-top: 50px'>content</div>


内容
内容
内容


来自W3C规范

8.3.1折叠式边缘
在CSS中，两个或多个框（可能是同级框，也可能不是同级框）的相邻边距可以合并形成一个边距。以这种方式合并的保证金称为崩溃保证金，由此产生的合并保证金称为崩溃保证金

相邻的垂直边缘塌陷[…]

两个边距相邻当且仅当：


两者都属于参与相同块格式上下文的流内块级别框
无线框、无间隙、无填充和无边框将它们分隔开
两者都属于垂直相邻的长方体边缘，即形成以下一对：

框的上边距及其第一个流入子项的上边距


在这里检查一下也许你也需要


内容
内容
内容
又是一个利润崩溃的问题。。。尝试将
边距底部添加到浮动中。使用填充代替边距；并非总是可能的，取决于您的设计。将“位置：绝对”添加到第三个区块多次应用相同的边距底部？那太不雅观了。填充起作用了，谢谢frenchie。虽然这是一个快速和肮脏的修复。CSS有时真的感觉很笨拙，这样的元素布局很麻烦…但当你有弹出元素时，溢出是个问题，所以我现在不惜一切代价避免它。
   <div style='overflow:hidden'>
     <div style='float: left; width: 50%;background:#bbb'>content</div>
     <div style='float: right; width: 49%;background:#bbb'>content</div>
    <div style='clear: both; margin-top: 0px;border:2px solid #ddd'>content</div>
   </div>