Question

我有一个容器div，里面有几个项目。容器需要有边框。问题是我还需要在容器内留下那些元素，这似乎＆＃34;删除＆＃34;来自流的元素。

当我尝试向容器添加边框时，它不会绕过所有元素，就好像它们不在容器中一样。

<div class="container">
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
</div>

.one {
    width:150px;
    height:50px;
    background:red;
    margin:5px;
    float:left;
}

.container {
    width:350px;
    border-style:solid;
    border-width:2px;
    border-color:black;
}

请参阅：http://jsfiddle.net/ynwbzw97/

任何想法如何让这个工作？

Answer 1

正如您所指出的，浮动元素将从流中移除。由于.container元素仅包含浮动元素，因此它本身就会崩溃。因此，您需要clear the floated elements。

将overflow元素的.container更改为visible以外的其他内容，以便建立新的block formatting context：

Updated Example

.container {
    width: 350px;
    overflow: auto;     /* added.. */
    border: 2px solid;
}

Example Here

或使用伪元素clearfix：

.container:after {
    content: '';
    clear: both;
    display: table;
}

Answer 2

你可以和你一起做一个简单的黑客攻击

.one{
    overflow:auto;
}

使用样式clear:both在最后添加子div是非常不错的解决方案。

Answer 3

您只需清除浮动内容即可将其保留在容器div中。

只需添加一个带有clear的div：在最后一个内部div之后和最后一个/ div标记之前。

<div style="clear:both;"></div>

所以你的完整标记是：

<div class="container">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div style="clear:both;"></div>
</div>

围绕着一组元素的边界漂浮了吗？

3 个答案: