Css 一组元素周围的边框是否向左浮动？

我有一个容器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>

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

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

.一{
宽度：150px；
高度：50px；
背景：红色；
保证金：5px；
浮动：左；
}
.集装箱{
宽度：350px；
边框样式：实心；
边框宽度：2倍；
边框颜色：黑色；
}

见：

---

有什么办法让它工作吗？

正如您所指出的，浮动元素将从流中删除。由于

.container

元素只包含浮动元素，因此它本质上会自行折叠。所以你需要

将

.container

元素的

溢出

更改为除

可见

之外的soemthing，以建立新的：

---

或者使用伪元素clearfix：

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

---

您只需清除浮点数，将其保留在容器div中

只需添加一个带有clear的div：在最后一个内部div之后和final/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>

---

你可以用你的类做一个简单的hack

.one{
    overflow:auto;
}

在最后添加一个子div，样式为

clear:both

，这是一个非常不错的解决方案

.one{
    overflow:auto;
}