我有一个容器，并且在它的子 div 中有 float:left 。问题是，一旦我在子 div 上应用 float:left，我的父 div 的背景就完全丢失了。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background: #CCC; width:100%; position:relative;">
<div style="float:left;">
This is some text
</div>
</div>
</body>
</html>
谁能告诉我如何解决这个问题？
最佳答案
float 元素没有 height 除非您在下面清除它们或给出明确的 height
试试这个，
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background: #CCC; width:100%; height:50px;position:relative;">
<div style="float:left;">
This is some text
</div>
</div>
</body>
</html>或者
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background: #CCC; width:100%; position:relative;">
<div style="float:left;">
This is some text
</div>
<div style='clear:left'></div>
</div>
</body>
</html>或者使用设置元素溢出的技巧。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background: #CCC; width:100%; overflow:hidden;position:relative;">
<div style="float:left;">
This is some text
</div>
</div>
</body>
</html>关于html - 为什么我在 div 上看不到我的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12760838/