学习web前端的入门就是html和css，虽然现在工作也快一年了，工作中也很少用到css的float属性，现在回过头来再看float属性，竟然有一点一知半解，干脆复习一下，在这里做一下记录，也分享给大家。对于部分刚入门的伙伴可能会有点作用。
一、涉及概念
学习新的概念，只有真正弄明白真正的原理，学习起来才能如鱼得水。说到float的原理，要涉及到一个概念——“文档流”,或者把他叫做"标准流"。
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流
这是官方对文档流的解释，可能对很多同学来说不是很好理解，换句话说，div块级元素，在页面中独占一行，自上而下排列，这就是"标准流"，如下图：
如上所示每个div独占一行，按照标签顺序自上而下排列的就属于文档流的块状元素。
二、原理
大家都知道用float属性可以使各个块状元素一行显示，那现在我们来说一下他的原理。
他的原理是这样的，当给某个元素设置了float属性后，他们的排列会发生三步变化
1、设置float属性的元素会脱离文档流，想象一下他会浮起来。
2、如果它后面是非浮动元素，那么紧跟在后面的非浮动元素会相继补上前面的位置
3、浮起来的元素覆盖当前位置的非浮动元素
我做了一个动画，大家来感受一下
1632658887203
大家看到这里大概就明白float的工作原理了吧。
三、举例说明
1.给box1设置浮动
根据上面讲到的原理，给box1设置了浮动，那么box1浮起来了，然后box2补上了box1的位置，box3补上了box2的位置，box4补上了box3的位置，然后浮起来的box1覆盖了box1标准流位置的box2。这里又涉及到了一个小问题，为什么这里的box2文字没被覆盖的，这是因为文本可以识别到浮动的元素，而排列在浮动元素的后面，不会被覆盖。
2.给box2和box4设置float
首先：box3浮起来，box4补上box3的位置，box3覆盖box4
其次：box1浮起来，box2以及后面的元素相继补上前面的位置
3.全部设置float,就会实现块状元素一行显示
四、结论
我们大概得出来一个结论，当我们给一个元素设置浮动时，他会脱离文档流浮起来，然后后面的元素会相继补上位置，后面的元素如果同样是浮动元素，那么同样会浮起来。
五、写在后面的话
我是在2018年大二的时候接触的web前端，当时的html是在学校学的，css是在B站上看的视频，推荐大家去看黑马教程的Pink老师的css教程，（看过的都把他称之为永远的神)
同学们，为了写这篇博客，俺特意去学了动画制作，懂得都懂！！！