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

2022-07-01 00:00:00 html css css-float

我有以下css和html设置：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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%并横向填充整个网页吗？

解决方案

发生这种情况是因为4px的额外空间被边框和部分框中的边框覆盖。只需同时向两者提供box-sizing: border-box；

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

相关文章