div属性的行为

Question

我注意到div标签的一个奇怪的行为（在我看来和我对HTML和CSS的了解）。 我正在使用自定义网格系统构建一个站点，如果我不应用浮动属性（左或右），我应用网格类的div将不会注意到边距属性。

代码：

.grid-100 {width: 100%;}
.grid-60 { width: 65%;  float: left;}
.grid-30 { width: 33%;  float: left;}
.grid-100, .grid-60, .grid-30 { margin-top: 30px;}

如果我没有将float:left;设置为.grid-100，则此类的div将不会将margin-top应用于30px。

有人可以给我一个解释吗？

Answer 1

请参阅margin collapsing。

正常行为是：

  

父母和第一个/最后一个孩子
      如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个边距顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   在最后一个孩子的边缘底部，那些边缘崩溃了。   折叠的保证金最终在父母之外。

当你漂浮它们时：

  

浮动和绝对定位元素的边距永不崩溃。