CSS / HTML：缩小浏览器时，向左浮动不起作用

stevey 发表于 Dev

斯蒂维

我有一个简单的HTML，如下所示：

<div id="main_container">
 <div class="floated_box">box 1</div>
 <div class="floated_box">box 2</div>
 <div class="floated_box">box 3</div>
 <div class="floated_box">box 4</div>
 <div class="floated_box">box 5</div>
 <div style="clear: both;"></div>
</div>

和以下CSS作为我的html元素：

#main_container {
  width: 400px;
  margin: 20px auto;
  border: 2px solid #cccccc;
  padding: 5px;
}

.floated_box {
  border: 1px solid #990000;
  display:block;
  float: left;
  height: 100px;
  width: 198px;
}

上面的代码给了我我想要的东西：

上面代码的结果

但是，我发现一个镜像错误，即当我缩小浏览器（使用ctrl +鼠标的滚轮）时，我的浮动元素都被破坏了，如下图所示：

缩小浏览器时的代码结果

当我删除border浮动元素的CSS代码时，缩小不会再破坏浮动元素。因此，我发现该border属性可能会破坏浮动元素。

如果我始终需要border浮动元素的属性，该如何解决错误？提前致谢。

这是jsfiddle演示

grc

border-box box-sizing在指定元素的宽度时，可以用来包含边框：

#main_container {
    width: 400px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 198px;
    box-sizing: border-box;
}

<div id="main_container">
    <div class="floated_box">box 1</div>
    <div class="floated_box">box 2</div>
    <div class="floated_box">box 3</div>
    <div class="floated_box">box 4</div>
    <div class="floated_box">box 5</div>
    <div style="clear: both;"></div>
</div>

另一种方法是使用负边距来说明边框宽度：