div兄弟导航栏下方没有出现div？

Question

我是业余爱好者，我不确定为什么 div 没有出现在导航栏 div 下方。我引用的 div 是 #sponsorBar div.

感谢您的帮助，如果我需要添加任何其他信息，请告诉我。

body {
  background-color:black;
  margin:0;
  padding:0;
}

#navBar {
  position:fixed;
  float:left;
  background-color:white;
  text-align:center;
  height: 50px;
  width:100%;
  margin:0;
  padding:0;
  top:0;
}

#navList {
  display:inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color:white;
}

#navList li {
  float:left;
}

#navList li:nth-child(1) {
  border-left: 0;
}

#navList li:nth-child(3) {
  margin-right: 100px;
}

#navList li:nth-child(5) {
  margin-left: 100px;
}

#navList li:nth-child(7) {
  border-right: 0;
}

#navList li a {
  display:inline-block;
  font-family:'Helvetica Neue', Helvetica, sans-serif;
  font-weight:bold;
  text-decoration:none;
  color:black;
  font-size:1.2em;
  vertical-align:-17px;
  margin: 0;
  padding: 0;
  height:50px;
}

#navList li:hover {
  background-color: black;
}

#navList li:hover a {
  color:white;
}

.navImage {
  float:left;
  display:block;
  margin:0;
  padding:0;
  max-height: 50px;
}
.navImage:hover {
  background-color: white;
}

.navListItem_left {
  border-left: 1px solid black;
  height: 50px;
  width:100px;
}

.navListItem_right {
  border-right: 1px solid black;
  height: 50px;
  width:100px;
}

#sponsorBar {
  clear:left;
  position:relative;
  display:block;
  background-color:white;
  height:100px;
  width:80%;
  margin:100px;
}

<div id="navBar">
  <ul id="navList" class="navListItem">
    <li class="navListItem_left">
      <a href="index.html">Home</a>
    </li>
    <li class="navListItem_left">
      <a href="teams.html">Teams</a>
    </li>
    <li class="navListItem_left">
      <a href="articles.html">Articles</a>
    </li>
    <li>
      <a href="/index.html">
        <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
      </a>
    </li>
    <li class="navListItem_right">
      <a href="menu5.html">Menu4</a>
    </li>
    <li class="navListItem_right">
      <a href="about.html">About Us</a>
    </li>
    <li class="navListItem_right">
      <a href="partners.html">Partners</a>
    </li>
  </ul>
</div>
<!--Sponsor Div-->
<div id="sponsorBar">
  <p style="color:red;">TEST</p>
</div>

https://jsfiddle.net/abelgoodwin1988/a6tthq9k/

Answer 1

哇！那太奇怪了！出于某种原因，JSFiddle 不喜欢 id "sponsorBar"。我不知道为什么。当我将 id（和相应的 CSS 代码）更改为 sB 时，它没有问题！！

https://jsfiddle.net/a6tthq9k/3/ HTML:

<body>
    <!--Navigation Div-->
    <div id="navBar">
        <ul id="navList" class="navListItem">
            <li class="navListItem_left">
                <a href="index.html">Home</a>
            </li>
            <li class="navListItem_left">
                <a href="teams.html">Teams</a>
            </li>
            <li class="navListItem_left">
                <a href="articles.html">Articles</a>
            </li>
            <li>
                <a href="/index.html">
                    <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
                </a>
            </li>
            <li class="navListItem_right">
                <a href="menu5.html">Menu4</a>
            </li>
            <li class="navListItem_right">
                <a href="about.html">About Us</a>
            </li>
            <li class="navListItem_right">
                <a href="partners.html">Partners</a>
            </li>
        </ul>
    </div>
    <!--Sponsor Div-->
    <div id="sB">
        <p style="color:red;">TEST</p>
    </div>
    <!--Content Div-->
</body>

CSS:

 body {
        background-color:black;
        margin:0;
        padding:0;
    }

    #navBar {
        position:fixed;
        float:left;

        background-color:white;
        text-align:center;

        height: 50px;
        width:100%;

        margin:0;
        padding:0;

        top:0;
    }

    #navList {
        display:inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color:white;
    }
    #navList li {
        float:left;
    }
    #navList li:nth-child(1) {
        border-left: 0;
    }
    #navList li:nth-child(3) {
        margin-right: 100px;
    }
    #navList li:nth-child(5) {
        margin-left: 100px;
    }
    #navList li:nth-child(7) {
        border-right: 0;
    }
    #navList li a {
        display:inline-block;
        font-family:'Helvetica Neue', Helvetica, sans-serif;
        font-weight:bold;
        text-decoration:none;
        color:black;
        font-size:1.2em;

        vertical-align:-17px;

        margin: 0;
        padding: 0;

        height:50px;
    }

    #navList li:hover {
        background-color: black;
    }
    #navList li:hover a {
        color:white;
    }

    .navImage {
        float:left;
        display:block;
        margin:0;
        padding:0;

        max-height: 50px;
    }
    .navImage:hover {
        background-color: white;
    }

    .navListItem_left {
        border-left: 1px solid black;
        height: 50px;
        width:100px;

    }

    .navListItem_right {
        border-right: 1px solid black;
        height: 50px;
        width:100px;
    }

    #sB {
        clear:left;
        position:relative;
        display:block;

        background-color:white;

        height:100px;
        width:80%;

        margin:100px;
    }

div兄弟导航栏下方没有出现div？

div not appearing below brother navbar div?

html

css

css-float

divider