Question

在下面的代码中，为什么蓝色div没有得到保证金？我说清楚：两者，但似乎没用。

感谢。

<div>
<div style="width: 200px; float: left; background-color: red">aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa| 
</div>

<div style="width: 200px; float: right; background-color: red"> a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a aa dasd ada da a </div>    
</div>

<div style="clear: both; width: 200px; background-color: blue; margin-top: 100px; height: 100%">ccccccccccs </div>

http://jsfiddle.net/nYLqA/19/

Answer 1

您正在以错误的方式清除，请在蓝色div

之前使用此行

<div style="clear: both;"></div>

Demo

提示：我建议你将浮动元素包装在包装器中并且自己清除包装，而不是保持浮动的div没有任何容器，也>我删除了2个迷路标签

如果你想自我清除一个元素

<div class="wrapper clear">
  <div class="floated1"></div>
  <div class="floated2"></div>
</div>
<div class="another_div_with_margin_top"></div>

.clear_self:after {
   content: "";
   clear: both;
   display: table;
}

Answer 2

设置

height: 100%; 
overflow: hidden;

在顶部包含div样式。它会解决你的问题。

jsFiddle File Link

浮动div后，保证金不起作用

2 个答案: