Html 如何阻止块级图元通过浮动图元展开

我正在使用Twitter Bootstrap 2.3.2创建浮动div旁边的堆叠导航。您可以在此处看到：

由于某些原因，列表元素通过向右浮动的信息框div展开。我不明白为什么。上面的P元素工作正常。有什么好处？

---

提前谢谢

只需在你的

ul

上打一下

overflow:auto

，就像这样：

 .nav.nav-pills.nav-stacked {
    overflow: auto;
 }

这将解决问题

这种方法之所以有效，是因为设置指定的溢出（默认值为

可见

）将创建一个新的块格式上下文，强制元素遵守浮动元素的块格式上下文的边界

---

再看看规范。这很有趣。

这是因为

元素的样式为

float:none

；根据标准：

该元素不会浮动，并将显示在其出现的位置 在文本中。这是默认值

---

将其设置为float:left或创建一个具有ul宽度的规则，这应该可以修复它。

没有人解释与无浮动块元素相邻的浮动元素的基本规则。在您的示例中，您有一个先浮动的块，然后是其他非浮动块：

<ul>floated</ul>
<h1>not floated</h1>
<p>not floated</p>
<ul>not floated</ul>
<h3>not floated</h3>

---

将内容包装在另一个div的左侧，并将其浮动到左侧。为了正确计算，不要忘记添加一个带有clear:tware样式的空div。请注意，

p

元素的行为与

li

元素相同。当你给那些

p

元素添加背景色时，你会看到这一点。我从未意识到只有文本环绕着浮动元素，而不是整个元素。不过，现在这很有道理。我接受了一个不同的答案，因为这里给出的解决方案对我最有效，但这也是一个很好的信息。非常感谢。

.floated {
    float: right;
    width: 250px;
}
/* for anything that comes after a .floated element */
.floated + * {
    margin-right: 280px;
}