为什么在DIV结束时会有空白区域

Question

为什么没有蓝色背景的DIV扩展来填充页面？ 另外，父DIV有黑色背景，未显示，怎么样？

我加入了我的开发者工具预览

Answer 1

在预览中，我可以看到同一级别中有3个div。 （蓝色就是其中之一）

1. div的宽度为19％
2. div的宽度为59％
3. div（蓝色）宽度为20％

19 + 59 + 20 = 98％告诉您div不会填满浏览器的宽度。

您必须确保div的总数为100％并且还要确保蓝色div内的任何内容都没有超出计算的20％的指定宽度

更新1

关于黑人div的第二个问题。 里面的div是浮动的，这使得外部div不会在没有被告知的情况下清除它们。因此，您需要清除或向外部div添加溢出css样式。

clear div

<outer div>
    <red div></div>
    <green div></div>
    <blue div></div>
    <div style="clear"></div> <!-- this div -->
</div>

<强>溢出

<outer div style="overflow:auto;"> <!-- added style -->
    <red div></div>
    <green div></div>
    <blue div></div>
</div>