Bootstrap：在浮动元素旁边使用 nav 会向下推其他内容答案

【问题标题】：Bootstrap: Using nav beside a floated element pushes other content downBootstrap：在浮动元素旁边使用 nav 会向下推其他内容
【发布时间】：2015-01-29 11:28:54
【问题描述】：

我有一个 2 列布局，右列中有一个引导导航。问题是右栏中的内容应该位于导航下方，而是被向下推以清除左栏。结果是我的右栏有一个导航，然后是很多垂直空白，然后是内容。

代码如下：

<head>
    <link href="/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
    <style>
        .left-column {
            padding: 10px;
            width: 300px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
        .right-column {
            padding: 10px;
            color: red;
            border: 1px solid black;
            margin-left: 320px;
        }
    </style>
</head>
<body>

<div class="left-column">
    <p>This is the left content</p>
</div>

<div class="right-column">
    <ul class="nav nav-pills">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
    </ul>
    <p>This is the right content</p>
</div>

</body>

右侧内容被下推的原因是左侧栏是浮动的，引导导航有一个:after伪元素，规则为clear: both;。

我试图找到一种方法来进行 2 列布局而不浮动左侧，但我需要右侧来占用剩余的水平空间，这是我能做到的唯一方法。

我也试过了：

删除 clear: both; 规则，但我最终将正确的内容水平附加到导航上
在导航后添加其他伪元素
在浮动块中包含导航，根据此 mozilla 页面上的注释，https://developer.mozilla.org/en-US/docs/Web/CSS/clear

非常感谢任何帮助。

【问题讨论】：

你可以让左列绝对定位吗？类似：jsfiddle.net/zc7e2Lt1/1（使用正确链接编辑）
好主意 Joshhunt。适用于上面的示例。在我的真实代码中，虽然我有一个包含两列的容器（带有背景颜色）。绝对定位左列将其从文档流中取出，这样当它比右列长时溢出容器...

标签： css twitter-bootstrap

【解决方案1】：

浮动规则适用于同一块格式化上下文中的项目。根据这篇文章https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context，有几种方法可以创建新的块格式化上下文。最适合我的选项是将右列的overflow 属性设置为auto。这里有一个很好的解释，https://developer.mozilla.org/en-US/docs/Web/CSS/overflow。

【讨论】：