父div

Question

以下是问题的链接：link

有问题的div是绿色内的灰色。您会注意到它们的宽度将适合父级（绿色）。但是，子div上的float: left属性不起作用。只有在父母身上添加float: left时才有效。

这样做会在父div和导航元素的顶部添加一些幻像间距。

.options {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 55px;
  background-color: green;
  /* float property */
  float: left; /* this will put child divs side by side but add space on top */
}

Answer 1

这是因为您没有清除包含浮动元素的容器元素。一个快速的解决方案是在您的2个容器（overflow: hidden;，.navbar-3）上添加.options。

执行此操作时唯一的问题是，容器元素之外的所有内容都不再可见。

另一种解决方案是通过添加以下样式来实现.clearfix hack：

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

在容器元素上，您现在可以添加clearfix类。