html - フロート左無効パディング

Question

2 つの div が並んでおり、1 つは左に 25% の幅でフローティングされ、もう 1 つは 75% の幅で表示されます。しかし、右側の div にパディングを適用すると、パディングが正しく機能しません。

JSfiddle の例を次に示します。

http://jsfiddle.net/88upt/

<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>

CSS

#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}

なぜこれが起こっているのか誰かが私に説明できますか?

ありがとう

Answer 1

何かを浮かせることは、その位置を絶対にするようなものです。隣接するコンテナの上にホバリングします。フローティング要素の幅に等しいマージン左を追加して、コンテナーを正しい幅にします。

http://jsfiddle.net/88upt/4/

#middle {
    background-color: blue;
    padding: 30px;
    min-height: 30%;
    margin-left:25%
}

編集もう少し詳しく説明します。

浮動要素は、兄弟要素のコンテンツをプッシュします。コンテンツの要素の左側を押し上げることはありません。パディングは、浮動要素によって隠されているだけです。

Answer 2

幅はパディングを考慮しません。

ソース: http://www.w3schools.com/css/css_boxmodel.asp

幅はコンテンツにのみ適用され、パディング、ボーダー、またはマージンには適用されません。

詳細については、こちらを参照してください。