Html 非浮动元素上的浮动元素：

我有一个两列布局，其中一个是左浮动的，另一个不是：

<div id="left">
    LEFT
</div>

<div id="right">
    RIGHT
</div>

在未浮动的

right

元素中，我有如下标记：

    <div id="nav">
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>

        <div class="clear"></div>
    </div>

    <h1>Welcome World</h1>

我的

clear

元素是：

.clear {
    clear: both;
}

最后，我得到了这个结果：

我认为问题在于我的

清除
元素也清除了浮动元素（
#left
）。
但我希望得到这样的结果：



将
#nav
元素设置为
内联块
，并将
宽度设置为
100%
：

#nav {
    background: blue;
    display: inline-block;
    width: 100%;
}

您可以只添加
overflow:hidden至
#导航
。这将为
#nav
中的列表项创建一个新的块格式上下文，因为浮动元素将从中取出（其流内容器将不考虑其高度，请注意
在我的小提琴中没有向下延伸到
#left
）

从

浮动、绝对定位元素、非块框的块容器（如内联块、表格单元格和表格标题）以及除“可见”之外具有“溢出”的块框（该值已传播到视口时除外）为其内容建立新的块格式上下文

我用了另一种方式。您可以将清除移到两个不同的位置之一（这会得到不同的结果），但总体问题已经解决。挑一个更合适的

（或）

在这两种情况下，我基本上更改了nav的css（因为没有背景会显示其他内容）

我只需将clear移到包含
div#left
和
div#right
的元素。把它放在
div#right
中，似乎在
div#right
的高度方面产生了一些有趣的效果

从导航中删除

清除浮动与浮动元素有关，但您已清除了未向左或向右浮动的元素，即
#nav
。所以添加
float:left到您的
#nav
，则只有您的
可以按照您的要求工作

+1代表小提琴。我总是要自己创造一个，这就是clear所做的。如果你把它放在H1的上方或下方，你会得到不同的结果。现在开始查找
清除：这两个
都是官方应该做的事情。+1对于这个不错的解决方案
；）。
.clear {
    clear: both;
}

#nav {
    background: blue;
    display: inline-block;
    width: 100%;
}

#nav {
background: blue;
overflow: hidden; /* Creates a new block-formatting context
                     for floated descendants */
}

#nav {
    background: blue;
    overflow: hidden;
}

<div class="clear"></div>

overflow: hidden;