これは私のhtmlコードfloatが背景色にどのように影響していますか？
<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>
であり、これはフロートなしの私のCSSコード
.menu-wrap{
background-color:pink;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350;
float:right;
}
です：ピンクの親のdivの色と上記の場合ではありません：それは背景を示している右のプロパティピンクの背景。なぜそれが起こっているのですか？
あなたはそれを行うあなたのCSSファイルが他に必要です。私はjsfiddleであなたのコードをテストして正常に動作しています。あなたが親のdivの幅と高さを言及しなかった、だから、子要素にfloat:rightを入れた後、親はまた、右に浮くので見https://jsfiddle.net/max234435/boL8zs4a/
を持っています。コードの下にチェック：
.menu-wrap{
background-color:pink;
display:inline-block;
width: 100%;
height: 105px;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350px;
float: right;
position: relative;
top: -17px;
}<div class="menu-wrap">
<ul class="menu">
</ul>
</div>私が正しくあなたの質問を理解している場合、これは私がお勧めです：
HTML：
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
はCSS：
.menu-wrap{
width: 100%;
height: 500px;
float: left;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
float: right;
background-color:blue;
border:solid;
}
OR：
CSS：相対/位置：詳細に絶対的なCSSプロパティ
.menu-wrap{
height: 500px;
position: relative;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
background-color:blue;
border:solid;
}
希望これは間違いなくfloatと位置を見てみましょう..あなたを助けます。
最後に私は理由を理解しました。それは単に の親要素にフローティング要素だけが含まれていて、高さが何もないためです。 https://css-tricks.com/all-about-floats/
背景には影響しませんが、浮動要素は通常のコンテナの高さに影響を与えないため、高さは0pxになります。 [div内の浮動小数点数、div外に浮動小数点数を浮かべます。なぜですか？]（http://stackoverflow.com/q/2062258/1529630） – Oriol
フローとは何か、それがどのように機能するのかを理解する必要があります。要素がフローティングされると、それらは標準ドキュメントフローから削除されるため、明示的にクリアする必要があります。彼らはもはや彼らの親コンテナにはなりません。 'clearfix'ハックを使用すると、結果が得られます。 ** FYI、float要素がインラインブロック要素になる** 浮動要素を使用するたびに 'clearfix'ハックを使用することをお勧めします。 –
ありがとうございます。 –