CSS浮动（float）属性的原理以及清除浮动的几种方法

浮动（float）的定义

1. 浮动的元素可以向左或向右移动，直到它的外边框碰到父元素的边框或者其他浮动框的边框为止！（注意是其他浮动框的边框！敲黑板！）
2. 设置为浮动的元素不在文档普通流中。

浮动的过程

1. 第一步：脱！（好污好污）不要乱想！我说的是浮动元素从文档普通流中脱离出来，要注意这个元素原来存在的位置不会保留，也就是说后面的元素会补上来。
2. 第二步：动！（好害怕，会不会被封号啊）浮动元素左右移动，直到碰到父元素的边框或者其他浮动框的边框。所以浮动元素有可能会覆盖普通流中的元素。

一个小疑问

Q：我之前一直很纠结浮动元素会不会上下动呢？

A：其实并不会。在程序执行浮动语句之前，它其实还是在文档流里面的。

   如果前面的元素设置了浮动，脱离了文档流，这个元素还是会补上去的

  （之前不理解为什么有时候后面元素会跑到上面去，可能就是这个原因。）

比如说我有4个div，设置如下（节选，样式什么的就不写了）：

.box1 {}
.box2 {float:left}
.box3 {float:right}
.box4 {float:left}

分析过程

div1：div1没有设置浮动，不动。

然后程序走啊走，走啊走，走到九月九，什么鬼。然后到了

.box2 {float:left}

好的，现在来回忆我们的秘籍，先脱再动！

div2：脱离文档流。
div3,4：补上div2的空缺（小三小四上位）。
div2：左移，最终停在div1下侧，覆盖在div3上。

然后程序继续走。走到div3家门口。发现div3被….

.box3 {float:right}

想象一下，现在的情况是，div1在第一行，div3在第二行上面盖着div3，div4在第三行。当div3也被拉出文档流时：

div3：脱离文档流。
div4：上位，到了div1下面。div2覆盖div4.
div3：右移，一直移到最右端，然后一头撞在墙上，跟div2在一行。

憋说话！继续走！终于看到胜利的曙光了。

.box4 {float:left}

这个时候，再想象一下，div4是在div1下面的，我把div4拉出来之后，想左移，但是发现有个div2，怎么办呐！俗话说得好，衣不如新人不如故，小四永远都斗不过正妻。

div4想往左走，那也只能跟在div2的后面了。

最后：就变成了这样（请不要吐槽我的配色）

物极必反

浮动用多了也会有弊端，文雅的说，就是浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素，那么这个父元素将会塌陷，高度变成零，俗称倒霉孩子。

解决方法

1. 父元素设置与子元素相同的高度；
2. 父元素设置：overflow：hidden；
3. 在浮动元素后加个div，设置属性为：clear：both；height：0；

clear属性规定元素的哪一侧不允许其他浮动元素。
第一种方法好理解啊，父元素的高度为0了，那我就再给他设置一个高度不就好了；
第二种方法参考 知乎-CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么（你问我为什么不自己写，因为我懒啊）
第三种方法其实我个人没有用过，作为小白我一般都是用第二种方法清除父元素的浮动，用clear：both清除下一元素的浮动影响。
曾经看到一篇文章，介绍了大概十来种清除浮动的方式，然后博主解释优缺点，那时候我还太年轻，都没怎么看懂为什么用这种方法不好，等我下次看懂了再补上来。