保证金最高不与明确：两者兼而有之
<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> 为什么在上面的代码中，“主数据”的margin:top无效？
你可以把两个浮动div到另一个有“溢出：隐藏”设置：
<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>
虽然Pointy展示了如何将浮动元素包装在div中，但也可以在浮动元素和主要数据部分之间插入一个空的div。 例如：
<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both;"></div> <div style="margin-top: 200px;">Main Data</div>
这可能被certificate是有用的，在某些HTML添加一个div包装是不可取的。
Pointy和Randall Cook有很好的答案。 我想我会展示一个更多的解决scheme。
<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="float: left; clear: both; margin-top: 200px;">Main Data</div>
如果你让第三个元素“float：left;” AND“clear：both”，它应该具有给第三个元素一个200像素边距的预期效果。 这是一个例子的链接 。
这也可能影响到其他跟踪元素是否需要浮动。 但是，它也可能具有预期的效果。
规范背后的逻辑是弯曲心灵，涉及清除和崩溃边界规则的复杂交互。
您可能熟悉传统的CSS 框模型 ，其中内容框包含在包含在边框中的边框中的填充 框中 ：
对于clear设置为非零的元素，可以在此模型中引入额外的组件： 清除 。
除“无”之外的其他值可能会导致清除 。 间隙抑制边缘塌陷，并作为元素边缘上方的间距。
换句话说，在这些情况下的盒子模型看起来更像这样：
但是什么时候出台清关，应该有多大？ 我们从第一个问题开始。 规范说 ：
通过首先确定元素顶部边界边缘的假设位置来计算设置了“清除”的元素的间隙。 如果元素的“清除”属性为“无”，则此位置是实际上边界边缘的位置。
如果元素上边缘的这个假设位置没有经过相关的浮线，则引入间隙，并按照8.3.1中的规则折边。
让我们将这个逻辑应用于问题提供者的代码。 记住，我们试图在下面的代码中解释第三个div的位置（添加背景以帮助可视化）：
<div style="float: left; background: red;">Left</div> <div style="float: right; background: green;">Right</div> <div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>
替代scheme：
实际上，您可以在浮动元素上放置一个
margin-bottom，以便向下推动已经clear: both的元素clear: both。
注：提出这个build议后，我不得不立即收回，因为这通常不是一个好主意，但在一些有限的情况下可能适合;
<div class='order'> <div class='address'> <strong>Your order will be shipped to:</strong><br> Simon</br> 123 Main St<br> Anytown, CA, US </div> <div class='order-details'> Item 1<br> Item 2<br> Item 3<br> Item 4<br> Item 5<br> Item 6<br> Item 7<br> Item 8<br> Item 9<br> Item 10<br> </div> <div class='options'> <button>Edit</button> <button>Save</button> </div> </div>
带有项目的面板被称为order-details与这个CSS
.order-details { padding: .5em; background: lightsteelblue; float: left; margin-left: 1em; /* this margin does take effect */ margin-bottom: 1em; }
在上面的小提琴 – 黄色面板有一个margin-top ，但除非它比最高的浮动项目大，那么它将不会做任何事情（当然这是这个问题的全部）。
如果将黄色面板的页margin-top设置为20em，则会看到边距，因为边距是从外侧蓝色框的顶部计算的。
在你的主要数据div中使用“padding-top”。 或者，也可以将主数据div封装在“padding-top”中。
尝试在其中一个浮动元素上设置底部边距。 或者，你可以将浮动元素包装在父元素中，并使用css hack 清除它，而不需要额外的标记 。
有时位置相对和保证金的组合可以解决这类问题。
我使用这种技术在WordPress中使用alignright和alignleft类。
例如，如果我想要一个“底部空白”，可以使用清除元素。
.alignright{ float: right; margin-left: 20px; margin-top: 20px; position: relative; top: -20px; }
对于你的例子，你可以做类似的事情
<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-bottom: 200px; position: relative; top: 200px;">Main Data</div>
