我叫浮动，我想讲讲我的故事

[Jomsou]

最近在整理回顾css的知识点，so我情不自禁地想以第一人称讲讲浮动的故事，这样可能有趣一点点。好了，以下从几个方面来讲。
1、我是谁？（什么是浮动？）
2、我为什么存在？（为什么要浮动？）
3、实现我的原理？（浮动的原理？）
3、我惹下的祸，怎么去解决？（如何清除浮动？）
——————————————————————————————————————————————
1、我是谁？（什么是浮动？）
打个比方，正常情况下，页面中的块级元素（block）就像一个个沉在水中的铁块，如果我们将铁块换成木块？那么他们就会飘起来，浮在水面上，如下，第二图就是给div1~div3设置float：left（浮动）后的结果。


2、我为什么存在？（为什么要浮动？）
因为块级元素独占一行，为了实现布局，设置浮动，可以方便布局。
（1）对于块级元素来说，在不设置宽度的情况下，默认宽度是100%，一旦设置浮动，它的宽度就会根据内容内容进行自动调整。

（2）设置浮动的元素会脱离正常的文档流。

（3）虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。如下图所示。
将div1设置为float：left，由于float元素脱离了文档流，div2自动向上补一位，文字normal2并没有被div1中的文字覆盖，而是排列在正常的相对位置上。

3、实现我的原理？（浮动的原理？）
“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。”

— W3School

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
float属性：
3个属性值：

left - 左浮动
right - 右浮动
none - 不浮动
特点：
元素会左移，或右移，直至触碰到容器为止。
设置了浮动的元素仍旧处于标准文档流中。会占据标准文档流空间，对其他元素有影响。
4、我惹下的祸，怎么去解决？（如何清除浮动？）
我惹下的祸--父元素高度坍塌
(自己偏爱的)解决方案：
在父元素里加一个“假儿子”--clearfix:after

.clearfix:after {
    content: "";
    display: table;   //触发BFC
    height: 0;
    clear: both;   //清除浮动
    visibility: hidden;
}
.clearfix{
     *zoom:1;
}

清除浮动前：

清除浮动后：

其他参照：【CSS】浮动和它的工作原理？清除浮动的技巧？