极客观点
项目管理
HarmonyOS
昨天不小心看到篇博文内容是是关于CSS：float属性的，手贱点进去后看到一个demo后百思不得其解，上网也查阅了很多相关资料(不含英文文献)，还是没有弄明白...希望有好心的哥哥帮我看下是怎么回事，先谢过了！
html结构:
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
css样式:
#a{background-color:Red;height:50px;width:100px;}
#b{background-color:Yellow;height:50px;width:200px;}
#c{background-color:Blue;height:50px;width:300px;}
#d{background-color:Gray;height:50px;width:400px;}
在Chrome下初始效果是这样的:
接下来给div-b，div-d和input2设置float：left属性，效果就变成这样了:
随着浏览器的宽度缩小还会变成这样:
这样:
这样:
这样:
以及这样:
小老弟所不能理解的是input2,input1,input3,input4和div-d的排列位置，还望好心的朋友给出详细的解释，谢谢啦！
html5
MDN的解释：
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
css规范的解释如下：
In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.
MDN的解释没有说具体的「部分的流动性」，在规范的解释中指明「先按照正常文档流定位，然后再脱离文档流进行定位」。
清楚这一点，也就能明白为什么浏览器宽度变小之后的排列变化了。
ps: 问题不错，我也学到了新东西。
参考对于浮动的定义我遗漏了什么
MDN-浮动元素是如何定位的
更新：
https://codepen.io/lifesimple...
浮动元素先根据正常文档流定位，再脱离文档流根据float定位。
四个input一排的情况，浮动元素按正常文档流定位(不加浮动)如图
而后加了浮动后，脱离了文档流根据浮动的方向浮动（是在正常文档流定位的基础上浮动 并不是任意浮动），此时对于input4来说div-d脱离了文档流，允许文本和内联元素环绕它，既然input3后面位置够了input4自然跟其后面成一排，如果位置不够但是div-d后面的位置够，就会跟在div-d后面环绕div-d定位，如图
其他情况也差不多理解吧。