Question

这是我的HTML代码

<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的粉红色，在上面的例子中没有粉红色背景。为什么会这样？

Answer 1

因为你没有提到父div的宽度和高度，所以在将float:right放在子元素中之后，父也在右边浮动。检查以下代码：

＆＃13;

.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;
}

＆＃13;

<div class="menu-wrap">
  <ul class="menu">
  </ul>
</div>

＆＃13;

Answer 2

如果我理解你的问题，那么这就是我的建议：

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属性。

Answer 3

最后我明白了原因:)这只是因为父元素只包含浮动元素，它的高度没有任何变化。有关详细信息，请参阅： - https://css-tricks.com/all-about-floats/

Answer 4

您的css文件必须有其他功能。我已经在jsfiddle中测试了你的代码并且工作正常。看看https://jsfiddle.net/max234435/boL8zs4a/

浮动如何影响背景颜色？

4 个答案: