为什么我的浮动元素在 40% + 60% 宽度设置下不能正常工作？

Question

我有以下 CSS 和 HTML 集：

html, body{
  margin: 0;
}

header{
  border: 1px solid green;
  background-color: green;
  height: 50px;
}

nav{
  border: 1px solid red;
  background-color: red;
  height: 50px;
}

aside{
  border: 1px solid yellow;
  background-color: yellow;
  height: 50px;
  width: 40%;
  float: left;
}

section{
  border: 1px solid blue;
  background-color: blue;
  height: 50px;
  width: 60%;
  float: right;
}

<body>
  <header>
    
  </header>
  <nav>
    
  </nav>
  <aside>
    
  </aside>
  <section>
    
  </section>
</body>

但我很困惑，我的 <aside> 和 <section> 即使在将它们设置为浮动属性后也没有并排。我将 <aside> 设置为 width: 40%，将 <section> 设置为 width: 60%。难道它们加起来不应该 100% 并横向填满整个网页吗？

Answer 1

您是否考虑了浏览器预设的边距和填充。尝试重置它们。

body{
margin: 0;
padding: 0;
}

Answer 2

发生这种情况是因为 4 像素的额外 space 被旁边和部分框的边框覆盖。只需向两者提供 box-sizing: border-box；

html, body{
  margin: 0;
}

header{
  border: 1px solid green;
  background-color: green;
  height: 50px;
}

nav{
  border: 1px solid red;
  background-color: red;
  height: 50px;
}

aside{
  border: 1px solid yellow;
  background-color: yellow;
  height: 50px;
  width: 40%;
  float: left;
  box-sizing: border-box;
}

section{
  border: 1px solid blue;
  background-color: blue;
  height: 50px;
  width: 60%;
  float: right;
  box-sizing: border-box;
}

<body>
  <header>
    
  </header>
  <nav>
    
  </nav>
  <aside>
    
  </aside>
  <section>
    
  </section>
</body>

为什么我的浮动元素在 40% + 60% 宽度设置下不能正常工作？

Why does my float elements not working properly at 40% + 60% width settings?

html

css

css-float