是什么让漂浮的div宽度缩小？

Question

我只是在学习响应式设计，并希望真正了解导致this的原因。

＆＃13;

＆＃13;

#container {
  border: 2px solid red;
  position: relative;
}

#box1 {
  border: 1px solid blue;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

#box2 {
  border: 1px solid green;
  width: 33%;
  position: relative;
  display: inline;
}

#box3 {
  border: 1px solid yellow;
  float: right;
  width: 33%;
  position: relative;
  display: inline;
}

＆＃13;

<div id="container">

  <div id="box1">BOX1</div>
  <div id="box2">BOX2</div>
  <div id="box3">BOX3</div>

</div>

＆＃13;

＆＃13;

＆＃13;

。 BOX2似乎没有扩大到33％。浮动项目和使用clearfix是一种让BOX2扩展的方法，如here所示。

＆＃13;

＆＃13;

#container {
  border: 2px solid red;
  position: relative;
}

#box1 {
  border: 1px solid blue;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

#box2 {
  border: 1px solid green;
  width: 33%;
  position: relative;
  display: inline;
  float: left;
}

#box3 {
  border: 1px solid purple;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

＆＃13;

<div id="container">

  <div id="box1">BOX1</div>
  <div id="box2">BOX2</div>
  <div id="box3">BOX3</div>
  <div style='clear:both'></div>

</div>

＆＃13;

＆＃13;

＆＃13;

我想了解1. 为什么浏览器将其呈现为2.如何将3个框保持彼此相邻，即使我将浏览器窗口调整到尽可能小的尺寸也是如此。