Question

我有一个2列布局，右栏中有一个bootstrap nav。问题是右栏中的内容应该位于导航栏的正下方，而是按下以清除左栏。结果是我的右栏有导航，然后是大量的垂直空白区域，然后是内容。

以下是代码：

<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;规则，但我最终将正确的内容水平附加到导航
在nav
根据此mozilla页面上的注释，在浮动块中包含导航，https://developer.mozilla.org/en-US/docs/Web/CSS/clear

非常感谢任何帮助。

Answer 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。

Bootstrap：在浮动元素旁边使用nav会推送其他内容

1 个答案: