为什么我的浮动元素在40%+60%宽度设置下不能正常工作？ [英] Why does my float elements not working properly at 40% + 60% width settings?
本文介绍了为什么我的浮动元素在40%+60%宽度设置下不能正常工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下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；
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%宽度设置下不能正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
