Question

比如说我在这个div中有2个div

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
</div>

现在我的问题是，如果绿色div的高度为300像素，我无法在ref下方看到背景黑色。

Answer 1

如果您使用float: ...;

，文本流将被“杀死”

您可以做的是说明文本流应该位于具有“clear”属性的float属性的元素之后。

你可以这样做：

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear: both;"></div>
</div>

Answer 2

DIV不能很好地处理嵌入浮动div的高度。您可以通过几种方式解决此问题。最简单的是明确：在外部div结束之前的两个div。

<div style="width: 300px; background-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear:both;"></div>
</div>

它还有助于拼写背景颜色：）

Answer 3

而不是清楚，我发现我可以添加

overflow: hidden;

到包含div的css。

Answer 4

这是因为你没有定义包装div的高度。要查看它的背景，你需要让它比里面的div大。

同时删除color: ##ffffff;"中的一个＃。

这是你问题的jsFiddle，定义父div高度，你会看到黑色出现在其他2个div之下。

HTML div浮动背景问题

4 个答案: