html - CSS 边距冲突

Question

我有两个类，一个是container，一个是top_menu，它包含我的菜单。

我不知道这是怎么发生的，但每当我用容器类定义一个 div 时，我的菜单都会在其顶部创建一个边距。如果我删除容器 div，菜单不会像通常那样获得边距。

我该如何解决这个问题？ 这是一个例子:

body {
    margin: 0;
    color:#484848;
    font-family: 'Verdana', sans-serif;
}
.container {
    left: 0;
    right: 0;
    margin: 10px auto 10px auto;
    width: 95%;
    border-radius: 4px;
    background: #e1e1e1;
}
.top_menu {
    width: 100%;
}
ul.horizontal-menu, .horizontal-menu ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.horizontal-menu {
    float: left;
    width:100%;
    background: #616161;
}
.horizontal-menu li {
    float: left;
    display: block;
    padding: 25px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #616161;
    cursor: pointer;
}
.horizontal-menu li .material-icons {
    margin: -10px;
}
.hideshow ul li {
    width: 250px;
    text-align: center;
}
.horizontal-menu li:hover {
    border-bottom: 3px solid rgb(246,83,20);
    padding-bottom: 22px;
    background: #484848;
}
.horizontal-menu li.hideshow ul {
    position:absolute;
    display:none;
    left: -203px;
    width: 300px;
}
.horizontal-menu li.hideshow {
    position:relative;
}
.hideshow ul {
    padding-bottom: 7px;
    background: #616161;
    border-radius: 0px 0px 4px 4px;
    margin-top: 25px;
}
.top_menu_extra {
    background-color: #616161;
    width: 100%;
    display: none;
    border: 0 solid #484848;
    border-top-width: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Menu -->
<div class="top_menu">
  <ul class="horizontal-menu">
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li>
    <li data-link="http://www.google.com">MENU 1</li>
    <li data-link="http://www.google.com">MENU 2</li>
    <li data-link="http://www.google.com">MENU 3</li>
    <li data-link="http://www.google.com">MENU 4</li>
    <li data-link="http://www.google.com">MENU 5</li>
    <li data-link="http://www.google.com">MENU 6</li>
    <li data-link="http://www.google.com">MENU 7</li>
    <li data-link="http://www.google.com">MENU 8</li>
    <li data-link="http://www.google.com">MENU 9</li>
    <li data-link="http://www.google.com">MENU 10</li>
    <li data-link="http://www.google.com">MENU 11</li>
  </ul>
</div>


<!-- Container -->
<div class="container">
  Container
</div>

<h1 class="txt-center">TEXT</h1>

Answer 1

您的 .top_menu 有 float 子项，因此从技术上讲它占据了页面上的 0 高度。在该菜单上使用某种 clearfix，以便页面上的其余元素将遵循其布局。我在此处添加了一个 .clearfix 类，您可以在需要清除父元素上子元素的 float 时随时重复使用。

body {
    margin: 0;
    color:#484848;
    font-family: 'Verdana', sans-serif;
}
.container {
    left: 0;
    right: 0;
    margin: 10px auto 10px auto;
    width: 95%;
    border-radius: 4px;
    background: #e1e1e1;
}
.top_menu {
    width: 100%;
}
ul.horizontal-menu, .horizontal-menu ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.horizontal-menu {
    float: left;
    width:100%;
    background: #616161;
}
.horizontal-menu li {
    float: left;
    display: block;
    padding: 25px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #616161;
    cursor: pointer;
}
.horizontal-menu li .material-icons {
    margin: -10px;
}
.hideshow ul li {
    width: 250px;
    text-align: center;
}
.horizontal-menu li:hover {
    border-bottom: 3px solid rgb(246,83,20);
    padding-bottom: 22px;
    background: #484848;
}
.horizontal-menu li.hideshow ul {
    position:absolute;
    display:none;
    left: -203px;
    width: 300px;
}
.horizontal-menu li.hideshow {
    position:relative;
}
.hideshow ul {
    padding-bottom: 7px;
    background: #616161;
    border-radius: 0px 0px 4px 4px;
    margin-top: 25px;
}
.top_menu_extra {
    background-color: #616161;
    width: 100%;
    display: none;
    border: 0 solid #484848;
    border-top-width: 1px;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Menu -->
<div class="top_menu clearfix">
  <ul class="horizontal-menu">
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li>
    <li data-link="http://www.google.com">MENU 1</li>
    <li data-link="http://www.google.com">MENU 2</li>
    <li data-link="http://www.google.com">MENU 3</li>
    <li data-link="http://www.google.com">MENU 4</li>
    <li data-link="http://www.google.com">MENU 5</li>
    <li data-link="http://www.google.com">MENU 6</li>
    <li data-link="http://www.google.com">MENU 7</li>
    <li data-link="http://www.google.com">MENU 8</li>
    <li data-link="http://www.google.com">MENU 9</li>
    <li data-link="http://www.google.com">MENU 10</li>
    <li data-link="http://www.google.com">MENU 11</li>
  </ul>
</div>


<!-- Container -->
<div class="container">
  Container
</div>

<h1 class="txt-center">TEXT</h1>