html - 为什么应用 float :right; in this specific case does it cause the div to go under the previous div?

Question

我试图让一个 div 向右浮动，但是当应用 float:right 并使用浏览器缩小页面大小时，div 会位于前一个 div 的下方。

https://jsfiddle.net/Crystalwolf/bku2f08c/1/

HTML

<div id="container">
  <div id="navbar-container">
    <div id="mainlogo">
    </div>
    <div id="sublogo">
      This is a subtitle test
    </div>
    <div id="navbutton-container">
      <div class="navbutton navcurrent">
        Home
      </div>
      <div class="navbutton">
        About
      </div>
      <div class="navbutton">
        Web Design
      </div>
      <div class="navbutton">
        Programming
      </div>
      <div class="navbutton">
        Graphic Design
      </div>
      <div class="navbutton">
        Contact
      </div>
    </div>
  </div>
  <div id="carousel">
  </div>
</div>

CSS

#container {
  width: 100%;
  height: 100%;
}

#navbar-container {
  position: fixed;
  background-color: white;
  width: 100%;
  height: 100px;
  padding: 15px;
  color: white;
  padding-left: 60px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  min-width: 1200px;
  overflow: hidden;
  white-space: nowrap;
}

#mainlogo {
  color: #373c40;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  float: left;
  display: inline-block;
  padding-left:50px;
}

#sublogo {
  color: #373c40;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  float: left;
  padding: 25px;
  display: inline-block;
}

#carousel {
  background-image: url("http://3nacu.com/unique/images/stars.png");
  width: 100%;
  height: 500px;
}

#navbutton-container {
  margin-top: 10px;
  background-color: white;
  height: 50px;
  padding-left: 50px;
  float: right;                  //THIS SPECIFIC FLOAT RIGHT
  display: inline-block;
  padding-right:50px;
}

.navbutton {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  padding: 15px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  color: #373c40;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
}

.navbutton:hover {
  background-color: #373c40;
  color: white;
}

.navcurrent {
  background-color: #B39EB5;
  color: white;
}

例如，让浏览器在 1920 处显示结果，所有内容都在一行中。一旦您将其缩短相当多，它就会继续进入前一个 div 的下方，而不仅仅是启用水平滚动条。

Answer 1

这是预期的行为，如果容器内没有足够的空间容纳 float 元素，它们就会中断。如果您想要一个可滚动的溢出，则需要为容器提供足够大的固定宽度(例如 1200px 而不是 100%)以容纳所有 float 元素。