为什么我无法看到div的背景 [英] Why can't I see my background on div
本文介绍了为什么我无法看到div的背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个容器，我有浮动：留在它的子div。问题是我应用float后立即：在子div上我的父div的背景完全丢失。
<！DOCTYPE html> ;
< html>
< head>
< / head>
< body>
< div style =background：#CCC; width：100％; position：relative;>
< div style =float：left;>
这是一些文本
< / div>
< / div>
< / body>
< / html>
有人可以告诉我该如何解决这个问题吗？
解决方案
height 以下或给出明确的身高
试试这个，
<！DOCTYPE html>< html> < HEAD> < /头> <身体GT; < div style =background：#CCC; width：100％; height：50px; position：relative;> < div style =float：left;>这是一些文字< / div> < / DIV> < / body>< / html>
<！DOCTYPE html>< html> < HEAD> < /头> <身体GT; < div style =background：#CCC; width：100％; position：relative;> < div style =float：left;>这是一些文字< / div> < div style ='clear：left'>< / div> < / DIV> < / body>< / html>
hack设置
溢出元素。
<！DOCTYPE html>< html> < HEAD> < /头> <身体GT; < div style =background：#CCC; width：100％; overflow：hidden; position：relative;> < div style =float：left;>这是一些文字< / div> < / DIV> < / body>< / html>
I have one container and I have float:left inside it's child div. Problem is as soon as I apply float:left on child div my parent div's background is completely lost.
<!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>
Can anybody tell me how do I fix this?
解决方案
float elements do not have height unless you clear them below or give explicit height
Try this,
<!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>
OR
<!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>
OR use this hack of setting overflow of element.
<!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>
这篇关于为什么我无法看到div的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
