Question

如果div中包含两个div：

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

两个内部div被渲染为“隐形”，因为容器div不会拉伸以允许它们填充，就好像它们不存在一样。这会产生丑陋的重叠/空白等。

你如何解决这个问题？

Answer 1

插入第三个div：

<div style="clear:both;"></div>

Answer 2

我认为可能是因为您忘记关闭标签，请尝试以下方法：

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>

Answer 3

尝试添加<br style="clear:both"/>，（或清除左侧）这是赋予生命到容器中浮动元素的常用方法

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>

Answer 4

父元素永远不会扩展为包含浮动子元素。虽然IE＆lt; 8确实这样做了，但这是一个长期存在的错误（数百万之一）。最好的解决方案是浮动父级，设置高度/宽度，或在CSS中使用overflow：auto。

Answer 5

外部div没有浮动，因此除非您明确设置高度，否则在这种情况下不会显示（边框除外）。将外部div的高度设置为20px或浮动它。

Answer 6

你有没有/不能在div中添加任何内容的原因？由于没有内容，它们重叠/显示不可见。

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

将显示彼此旁边的两个div（经过测试的IE6，Chrome 3，Firefox 3.5，IE7）

HTML / CSS - 为什么浮动：左渲染为'隐形'？

6 个答案: