左，右列总是等于中心高度的原因是什么

Question

这是代码。 css：

#content{overflow:hidden;}

   .left{width:200px; margin-bottom:-200px;padding-bottom:200px; background:#cad5eb; float:left;}

   .right{width:400px; margin-bottom:-200px; padding-bottom:200px; background:#f0f3f9; float:right; }

   .center{margin:0 410px 0 210px; background:#ffe6b8; height:100px;}

HTML：

<div id="content">  
  <div class="left">hello</div>  
 <div class="right">right </div>  

  <div class="center">center</div>

</div>

左，右列总是等于中心高度的原因是什么。如果边缘底部：-200px;填充底部：200px值大于中心的高度值。

Answer 1

他们没有，添加边框并强制#content非常高（绕过overflow:hidden），你会看到.left和.right有相同的高度但.center更短：

  

http://jsfiddle.net/ambiguous/q27pf/

.left和.right div的高度相同，因为它们都有一行具有相同样式和相同padding-bottom的文本。

如果#content上没有明确的高度，#content变得足够高以容纳.center，则在计算高度时不会考虑浮动.left和.right #content，因为它们是浮动的。