这是我的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中测试了你的代码并且工作正常。看看https://jsfiddle.net/max234435/boL8zs4a/
因为你没有提到的宽度和父DIV的高度，所以把float:right的子元素后，家长还浮在右侧。检查下面的代码：
.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：
.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;
}
希望这可以帮助你..绝对看看浮动和位置：相对/职务：详细绝对的CSS属性。
最后我理解了原因:)它仅仅是因为 父元素只包含浮动元素，它的高度折叠为无。 有关更多详细信息，请参阅： - https://css-tricks.com/all-about-floats/
它不影响背景，但浮动元素对正常容器的高度没有影响，因此折叠为0px高。参见[在div内浮动的东西，浮动在div之外。为什么？]（http://stackoverflow.com/q/2062258/1529630） – Oriol
您需要了解什么是FLOAT以及它是如何工作的。当元素被浮动时，它们将从普通文档流中被移除，因此需要明确地清除它们。他们将不再在他们的父容器中。如果你使用'clearfix' hack，那么你会得到期望的结果。 **仅供参考，浮动元素变为嵌入块元素** 无论何时使用浮动元素，最好使用'clearfix' hack。 –
感谢你俩:) –