0
I以下CSSとHTMLのセットを持っている：フロート要素が40％+ 60％幅の設定で正しく機能しないのはなぜですか？
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%に加えて、ウェブページ全体を横方向に埋めるべきではありませんか？
私はまた、任意のパディングやマージンを追加していません。 – 5120bee
両方に 'box-sizing：border-box;'を適用してみてください。ボーダーは幅に追加されるので、要素は実際には40％と60％より2倍大きいことに注意してください。私が言及したプロパティは、パディング/ボーダーが要素の幅に影響を与えないように制限します。 – Santi
ああ、私は国境の幅を考慮しなかった！本当にありがとう！ – 5120bee