CSS vh and vw: 为什么我的div和上面的div重叠了？

Question

在下面的SSCCE中，为什么#sliderAreadiv和上面的#topBardiv重叠，而div是块级元素？

我希望它出现在 #topBar?

下面

#left-div {
  float: left;
}
#right-div {
  float: right;
}
a {
  margin: 10px;
}
#topBar {
  width: 100%;
}
#sliderArea {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}
#four-cols {
  margin: 5px 100px 5px 100px;
}
#col-one {
  background-color: orange;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-two {
  background-color: blue;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-three {
  background-color: green;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-four {
  background-color: red;
  height: 125px;
  width: 100px;
  display: inline-block;
}

<div id="topBar">
  <div id="left-div">
    <a href="#">Login</a>
  </div>
  <div id="right-div">
    <a href="#">Menu One</a>
    <a href="#">Menu Two</a>
  </div>
</div>
<div id="sliderArea"></div>
<div id="four-cols">
  <div id="col-one"></div>
  <div id="col-two"></div>
  <div id="col-three"></div>
  <div id="col-four"></div>
</div>

Answer 1

添加到您的CSS：

#topBar {
width: 100%;
overflow: hidden;
}

在浮动元素的wrapper中添加overflow: hidden，浏览器可以计算出浮动元素的高度

Answer 2

因为有 float 个孩子，您需要添加

#topBar {
 width: 100%;
 overflow: hidden; <-- add this
}

或

#topBar {
 width: 100%;
 display: inline-block; <-- add this
}

这将 clear floats

演示 - http://jsfiddle.net/qbx5vwy5/6/

Answer 3

您需要清除 floats :

div{ clear:both; }

JSFiddle

或仅针对 #sliderArea 元素：

JSFiddle

Answer 4

您可以在您希望他们清除的地方添加清除。 JSFiddle

.clear {
    clear: both;
}

如果不清除浮动，它们就会粘在一起。通过添加 clear，您将停止浮动并在必要时启动 "new" 浮动 :)

CSS vh and vw: 为什么我的div和上面的div重叠了？

CSS vh and vw: Why does my div overlap with the div above it?

html

css

clearfix

JSFiddle

JSFiddle