Question

请考虑以下事项：

<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>

为什么margin-top在这里不起作用？第三个元素仍然粘在前两个元素上。

Answer 1

您需要尝试将margin-bottom添加到浮点数中。

或者您可以尝试添加

<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>

<强> JSFIDDLE DEMO

来自W3C规范

8.3.1折叠边距

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。以这种方式组合的边距称为折叠，结果合并边距称为折叠边距。

相邻的垂直边距会崩溃 [...]

当且仅当：
时，两个边距相邻

都属于参与相同块格式化上下文的流内块级框

没有行框，没有间隙，没有填充，没有边框将它们分开

都属于垂直相邻的盒子边缘，即形成以下对中的一个：

盒子的上边距及其第一个流入的孩子的上边距

Answer 2

在这里查看它可能是你需要相同的 https://jsfiddle.net/chaitanyaah/yychtp8t/

   <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>

尽管明确：浮动元素，但保证金顶部不起作用

2 个答案:

8.3.1折叠边距