4

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

<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和的 CSSitem是（如你所见，item是浮动的）：

#nav {
    background: blue;
}

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

我的clear元素是：

.clear {
    clear: both;
}

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

在此处输入图像描述

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

在此处输入图像描述

这是小提琴演示

4

5 回答 5

1

工作 jsFiddle 演示

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

#nav {
    background: blue;
    display: inline-block;
    width: 100%;
}
于 2013-06-03T03:42:49.480 回答
1

无需在 HTML 中添加不需要的标记，您只需添加overflow: hidden;到#nav. 这将为 中的列表项创建一个新的块格式上下文#nav，因为浮动元素被从正常流中取出（它的流入容器不会尊重它们的高度，请注意在我的小提琴中<body>没有向下延伸）#left

从视觉格式模型，9.4.1：

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

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

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

于 2013-06-03T03:42:57.763 回答
0

清除浮动与浮动元素有关，但您已清除未向左或向右浮动的元素，即#nav。因此，添加float: left;到您的#nav然后只有您<div class="clear"></div>将按您想要的方式工作。

演示

于 2013-06-03T04:04:18.107 回答
0

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

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

于 2013-06-03T03:49:02.310 回答
0

jsFiddle 上的示例

从#nav 中删除

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

为#nav 添加样式

overflow: hidden;
于 2013-06-03T03:49:29.967 回答