如何强制div元素将其内容保存在容器中

Question

我制作css菜单。为此，我使用ul。当我li向左浮动时，所有li都会超出ul。我的意思是ul的高度变为零。如何在向左浮动后在li内显示ul。

一种方法是使用一些常见的类创建一个div标记并添加清除：在css中都可以使用它，但我不希望这样。

我需要更好的解决方案。

请帮助

Answer 1

只需将overflow: auto;添加到<ul>即可。这将使文本不会泄漏到UL之外。

请参阅：http://jsfiddle.net/6cKAG/

---

但是，根据您正在做的事情，可能更容易制作<li> display: inline;。这完全取决于你在做什么！

请参阅：http://jsfiddle.net/k7Wqx/

Answer 2

如果您为孩子定义float，则必须清除您的父母。将overflow:hidden写入您的UL。

ul{
 overflow:hidden;
}

或 您也可以使用clearfix方法：

ul:after{
 content:'';
 clear:both;
 display:block;
}

阅读此http://css-tricks.com/snippets/css/clear-fix/

Answer 3

如果您希望div中的溢出文本自动换行而不是隐藏或制作滚动条，请使用

word-wrap: break-word

属性。

Answer 4

当浮动元素（菜单项）位于非浮动容器（ul）内时会发生这种情况。

这可以通过浮动容器来修复（很少可以接受），或者applying a clearfix来解决这个问题。