如何阻止块级元素通过浮动元素扩展

Question

我正在使用Twitter Bootstrap 2.3.2在浮动div旁边创建堆叠导航。你可以在这里看到它： https://www.tntech.edu/studentaffairs/orientation-and-student-success/

由于某种原因，列表元素正在通过向右浮动的信息框div进行扩展。我不明白为什么。它上面的P元素正常工作。是什么赋予了？ 提前谢谢！

Answer 1

在您的overflow: auto上轻拍ul，如此：

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

这将解决它。

这样做的原因是设置指定的溢出（默认值除visible除外）将创建一个新的块格式化上下文，强制该元素遵守浮动元素的块格式化上下文的边界。

同时查看 Block Formatting Context 规范。这真是令人着迷。

Answer 2

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

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

如果你将背景应用于所有这些非浮动元素，你会看到它们全部溢出浮动元素。浏览器足够聪明，可以相应地包装文本，但包含block仍然填充容器的整个宽度。

这只是你必须要处理的事情。一旦你理解了它，你就可以使用它来获得力量。如果您不希望这些项目溢出浮动的项目，我建议使用边距：

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

Answer 3

这是因为<ul>元素的样式为float:none;根据标准：

  

元素没有浮动，并且会在它出现的位置显示   在文中。这是默认的

将它设置为float：left或创建一个带有ul宽度的规则，并且应该修复它。