Html 浮动是如何影响背景色的？_Html_Css

Html 浮动是如何影响背景色的？

html css

Html 浮动是如何影响背景色的？,html,css,Html,Css,这是我的html代码 <html> <head> <link rel="stylesheet" href="main-pd.css"/> </head> <body> <div class="menu-wrap"> <ul class="menu"> </ul> </div> </body> </html> 如果没有float:right属性，它将显示父div的背

这是我的html代码

<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>

如果没有float:right属性，它将显示父div的背景：粉红色，在上面的例子中没有粉红色背景。为什么会发生这种情况？

您的css文件中必须有其他东西在执行此操作。我已经在JSFIDLE中测试了您的代码，并且运行良好。看一看

因为您没有提到父div的宽度和高度，所以在子元素中放置

float:right

后，父div也会在右侧浮动。检查以下代码：

。菜单换行{
背景颜色：粉红色；
显示：内联块；
宽度：100%；
高度：105px；
}
保险商实验室{
背景颜色：蓝色；
高度：100px；
边框：实心；
宽度：350px；
浮动：对；
位置：相对位置；
顶部：-17px；
}

如果我正确理解了你的问题，那么我建议：

HTML:

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

或：

CSS:

希望这对你有帮助。。一定要详细看看float和position:relative/position:absolute css属性。

最后我明白了原因：）这仅仅是因为父元素只包含浮动元素，其高度折叠为零。

有关更多详细信息，请参阅：-

它不影响背景，但浮动元素对普通容器的高度没有影响，因此它会塌陷为0px高。请看，您需要了解什么是FLOAT以及它是如何工作的。当元素浮动时，它们将从正常的文档流中删除，所以需要明确地清除它们。它们将不再位于其父容器中。如果您使用

clearfix

hack，那么您将得到想要的结果。仅供参考，浮点元素将变为内联块元素。无论何时使用浮动元素，最好使用

clearfix

hack@epascarello宽度：350px和宽度：350对ul的高度有相同的影响。

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

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

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