Question

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

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

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

CSS是：

#left {
    float: left;
    width: 200px;
    background: yellow;
}

#right {
    margin-left: 200px;
    background: orange;
}

在没有浮动的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>

nav和item的CSS（如您所见，item已浮动）：

#nav {
    background: blue;
}

.item {
    background: green;
    float: left;
    margin-right: 10px;
}

我的clear元素是：

.clear {
    clear: both;
}

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

enter image description here

我认为问题在于我的clear元素清除浮动元素（#left）。但我希望得到这个结果：

enter image description here

Here is the fiddle demo

Answer 1

Working jsFiddle Demo

将#nav元素设为inline-block并将width设置为100%：

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

Answer 2

您可以将overflow: hidden;添加到#nav，而不是在HTML中添加不需要的标记。这将为#nav中的列表项创建一个新的块格式化上下文，因为浮动元素从normal flow中取出（其流入容器不会尊重它们的高度，请注意{ {1}}在我的小提琴中没有延伸到<body>

来自Visual Formatting Model, 9.4.1:

浮动，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），阻止“溢出”除“可见”之外的框（当该值传播到视口时除外）为其内容建立新的块格式化上下文。

#left

http://jsfiddle.net/bJFUj/9/

Answer 3

我以不同的方式做到了这一点。您可以将清除移动到两个不同的位置之一（这会得到不同的结果），但整体问题已解决。选择哪一个更合适。

（http://jsfiddle.net/bJFUj/4/或http://jsfiddle.net/bJFUj/6/）

在这两种情况下，我基本上都会更改导航的CSS（因为没有背景会显示）

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

我只是将clear清除到包含div#left和div#right的元素。把它放在div#right里面似乎会产生一些关于div#right高度的有趣效果。

Answer 4

Example on jsFiddle

从#nav

中删除

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

为#nav添加了样式

overflow: hidden;

Answer 5

清除浮动与浮动元素有关但你已经清除了你没有向左或向右浮动的元素，即#nav。因此，将float: left;添加到#nav，然后只有<div class="clear"></div>可以按照您的意愿运作。

<强> demo

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

5 个答案: