保证金崩溃不起作用

Question

我正在尝试创建一些布局，但我遇到了问题。我知道边缘崩溃的概念 我使用了这个HTML代码

<div class="container">
  <div class="left"></div>
  <div class="right"></div>    
<div>

这是我的css代码

.container{
  width:1080px;
  margin:0 auto;
  background:red;
  overflow:hidden;
}

.left{
   background:yellow;
   width:510px;
   height:200px;
   float:left;
   margin:20px;
}

.right{
   background:blue;
   width:510px;
   height:200px;
   float:right;
   margin:20px;
}

但我的代码无效。我有以上输出，但我想得到两个div inline http://jsfiddle.net/Cp2Bq/

所以我想知道为什么我的代码中的保证金崩溃不起作用。

Answer 1

  

所以我想知道为什么我的代码中的保证金崩溃不起作用。

这是因为它们不在正常流程中。 规范说明了这一点：

  

正常情况下两个或多个相邻的块状框的垂直边距   流动崩溃

此外，正如specification for floats中所见：

  

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。