CSS:基本布局问题 - 将嵌套元素保持在彼此内部

Question

我一直发现,如果我在彼此内部嵌套div,并且其中一个内部浮动,则外部不会在它周围扩展.

例:

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

我需要对外部div做什么才能覆盖内部div？IE:把它的边框/背景颜色一直放在它周围？

另外,我在这里遇到的一般原则是什么？如果是这样,我应该怎么看才能深入了解它是什么？

谢谢!

编辑

大家好,

感谢您的答案,语义正确,没有,以及链接.

虽然我最终会在最后的工作中使用溢出,但我会将Ant P的答案视为已被接受,因为它是第一个真正起作用的答案,并且让我摆脱了短暂的干扰,即使它冒犯了语义敏感性.

作为一个长期的html hack试图转向体面的css布局,我当然可以理解并同情,使用语义错误的黑客来完成工作,虽然我相信他会在这之后改变这种习惯= o)

Answer 1

您可以使用overflow:hidden严格使用CSS

<div style='background-color:red;overflow:hidden;'>
...
</div>