如何强制 div 元素将其内容保留在容器内答案

【问题标题】：How to force div element to keep its contents inside container如何强制 div 元素将其内容保留在容器内
【发布时间】：2019-08-24 21:27:25
【问题描述】：

我正在制作一个 CSS 菜单。为此，我使用ul。当我让li 向左浮动时，所有li 都在ul 之外。我的意思是ul 的高度变为零。我怎样才能让li 显示在ul 中，在给左浮动之后。

一种方法是使用一些通用类创建一个div 标记，并在 css 中添加 clear: both，但我不想要这个。

我该如何解决这个问题？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

ul{
 overflow:hidden;
}

或您也可以为此使用clearfix 方法：

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

【讨论】：

【解决方案3】：

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

word-wrap: break-word

财产。

【讨论】：

【解决方案4】：

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

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

【讨论】：