浮动学习小结

1.什么是浮动？
浮动，CSS中用float定义，顾名思义系列。我个人理解为一个封闭的，装了水的盒子内中的一块泡沫。为什么说是泡沫？首先它可以漂浮起来，水面(非浮动元素）是无视它的。然后它有一定的体积，与水面也有接触，会把其他东西排挤出去（文字环绕等）。最后它在水面之上，所以不在文档流（水面的水流）内。

2.浮动是如何工作的？
浮动的设计初衷是用于浮动图像内的文本块（出自MDN），这一点我认为很重要。那么，所有对浮动的理解都应该不违背这个初衷，否则会造成不必要的学习成本。也许最开始设计浮动的时候根本没有想过可以用它来布局吧...
浮动的工作方式在我的理解，就是从文档流（整个Body）中取出一部分，然后把它变成泡沫，让它浮在水面（文档流）上。

3.为什么需要浮动？（浮动的作用）
html元素有两种状态：
1.块元素。2.内联元素。
块元素有物理属性，会占据一行，能设置宽高等特性，多个块元素会分行显示。比如：div,p 。而内联元素没有物理属性，不会占据一行，多个内联元素会并排显示。比如：Span,em,b,i等。
但是有些时候，我想让某些元素并排显示，但是又想设置它们的物理属性，而HTML是表结构，并不负责表现层的东西。这个时候使用块或者内联，都不能够满足我的需求。

那么，float的使用应运而生。它让块元素对外呈现了内联元素的特性，对内呈现了块元素的特性。

4.为什么要清除浮动？

因为，浮动是有副作用的。浮动会让元素脱离文档流，但是其实还是会影响不浮动元素的。因为它会让浮动元素的周围元素表现的如同浮动元素不存在一样。其中：
块状元素：钻进浮动元素之下，被浮动元素所覆盖。
行内元素：环绕在浮动元素周围，为浮动元素留出空间。
父元素：坍缩。

为了不出现这些情况，我们需要清除浮动。

5.常用的清除浮动方法有哪些？
（1）添加新的元素，并应用clear:both;
(2) 给父级元素定义overflow(一般设置为auto/hidden)
(3)重要，尽量使用这种。伪类选择器after法。利用after和 before在元素内部插入两个元素块，来达到清除浮动的效果。原理类似于方法（1），但是因为是伪类选择器，所以可使结构更加清晰。例如：

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>  

.outer :after {
clear:both;