使用float和inline-block

Question

似乎当我在元素上使用float或inline-block时，它们的边距或填充会加倍。为了说明这一点，中间和底部之间的边距是5％。但是，顶部的尺寸也是5％，顶部是底部的一半。

当我检查JSFiddle并重新调整窗口大小时，我注意到顶部不会相对于屏幕窗口的宽度按高度进行缩放，但是垂直边距确实如此。

任何修复或解释都将不胜感激。

＆＃13;

＆＃13;

html {
  overflow-y: scroll;
}
* {
  margin: 0px;
  padding: 0px;
  border: none;
}
div {
  outline: black solid 1px;
}
.top {
  position: fixed;
  width: 100%;
  height: 5%;
}
.section {
  float: left;
  width: 20%;
  height: 100%;
}
.left {
  float: left;
  vertical-align: top;
  width: 25%;
  margin: 5% 0px;
}
.left1 {
  float: right;
  width: 80%;
}
.left2 {
  float: right;
  width: 80%;
}
.right {
  float: left;
  vertical-align: top;
  width: 75%;
  margin: 5% 0px;
}
.right1 {
  float: left;
  vertical-align: top;
  width: 66.66666%;
}
.right2 {
  float: left;
  vertical-align: top;
  width: 33.33333%;
}
.right21 {
  width: 80%;
}
.right22 {
  width: 80%;
}
.bottom {
  width: 100%;
}

＆＃13;

<div class="top">
  <div class="section">top section 1
  </div>
  <div class="section">top section 2
  </div>
  <div class="section">top section 3
  </div>
  <div class="section">top section 4
  </div>
  <div class="section">top section 5</div>

</div>
<div class="left">
  <div class="left1">left 1
  </div>
  <div class="left2">left 2</div>

</div>
<div class="right">
  <div class="right1">right 1
  </div>
  <div class="right2">
    <div class="right21">right 2 1
    </div>
    <div class="right22">right 2 2</div>
  </div>

</div>
<div class="bottom">
  bottom
</div>

＆＃13;

＆＃13;

＆＃13;

的jsfiddle：

https://jsfiddle.net/9c8uoz0q/

Answer 1

这是因为您的.top处于固定位置且您的.bottom处于浮动状态。

清除.bottom的浮动并移除.top的固定位置，您应该看到它按照您的意图缩放。

Fiddle