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

Question

我有一个简单的 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 + 鼠标滚轮），我的浮动元素都是销毁，如下图：

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

如果我总是需要 border 属性用于浮动元素，我该如何修复错误？提前致谢。

这是jsfiddle demo

Answer 1

只需将宽度更改为：49%：DEMO

 #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: 49%;
}

Answer 2

您可以在指定元素的宽度时使用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>

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

margin: 0px -1px;

Answer 3

这是一种可能适合您的解决方案。

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

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

http://jsfiddle.net/sk4qm2w5/2/

您可能还想试试哪种宽度最适合您。 width: 45%; 只是为了说明问题。

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

CSS/HTML : float left not working when I zoom out the browser

html

css

css-float

border