Float浮动与清除浮动

Float浮动

浮动定义了元素在哪个方向浮动，不论被浮动的元素本身是何种元素，浮动之后都会生成一个块级框。
浮动主要是为了让页面中的元素在水平方向依次横向排列，在页面布局中非常有用。
相关属性值

值	描述
left	左浮动
right	右浮动
none	默认，元素不浮动
inherit	从父元素继承float属性的值

没有浮动之前，所有的元素在文档的普通流中（如下图：）

某元素浮动之后，它便飘了起来，我们称之为脱离文档流。（就好比气球充满气体之后便离开地面飞了~~）
他们都是通过一种特定的条件达到了某种效果，气球通过添加气体才可以飘，那元素便是添加浮动（例如：float:left;）才可以飘。

既然它都飘了，那它便不在占据浏览器位置，那么该位置就会被该元素后面没有浮动的元素占据。注意是被没有浮动的元素占据位置哦。
这就像你在KFC，你本来在一楼就餐，结果因为楼上的某处风景（添加了float），你去了二楼就餐，那么你原来的位置就会被其他人占据，而这些占你原来位置的人都是没被楼上风景吸引的人（即没有添加float）。

下面我们具体看一下添加float属性后的效果：

<div id="father" style="border: 3px solid black;"><div class="box1">一一</div><div class="box2">二二</div><div class="box3">三三</div>
</div>

初始div的分布状况：

当一一、二二、三三都浮动之后，我们会看到他们的老父亲（id=“father”）div没有高度了，这就是高度塌陷（解决方法之后写）。
一一、二二左浮动，三三右浮动的效果：

只给一一float之后，我们可以发现一一飘了，二二占据了他之前的位置，并且文字会环绕一一显示，不被覆盖。这个时候页面排版便产生了问题，为了整个页面的可视性，这边就会涉及到清除浮动了，我们总不能给用户两张重叠的图，让用户脑补吧。

当我给二二、三三浮动之后，会发现他们并不会到一一那一行，说明浮动之前的元素都不会受到影响。
父元素div（id=“father”）高度变小，是因为二二、三三飘了，不在一层，就不计算他们的高度了，其实还是高度塌陷的问题，解决方法之后涉及。

以上都是空间足够的一些效果显示，给他们的老父亲div添加固定宽，会发现一起浮动之时，宽度不够，放不下的元素会往下一行走，直到有足够的空间。如果最终也没有足够的空间，该元素一部分就到了浏览器页面之外，看不到了。
当然还会有高度不够被卡住的现象，我们可以自己尝试，还蛮有趣的。我就不一一展示了。

<div id="" style="border: 3px solid black;width:100px;"><div class="box1">一一</div><div class="box2">二二</div><div class="box3">三三</div>
</div>

前面我们提到了清除浮动以及高度塌陷，这边便来讲讲这个。

float清除浮动

这里我们便来谈谈浮动之后产生的高度塌陷怎么解决，其实也就是清除浮动了的方法啦。
插播一个小知识点：
在CSS中，clear属性用来清除浮动。
语法：选择器{clear: 属性值;}

值	描述
left	不允许左侧有浮动元素（清除左侧浮动影响）
right	不允许右侧有浮动元素
both	同时清除左右两侧的浮动影响

插播结束，我们继续~~

Hack	描述	优点	缺点
1	给父元素设置高度	适合高度固定的页面布局	局限性有点大，高度自适应的不能用哦
2	父级添加overflow属性（触发BFC）。针对IE6兼容问题添加声明zoom:1;	适合高度自适应的页面布局	文本内容增多容易不换行，会对溢出的内容隐藏裁剪,无法显示溢出的内容。
3	添加额外标签	通俗易懂	代码冗余
4	给父元素设置高度	符合闭合浮动思想，结构语义化正确	IE6和IE7不支持:after，使用zoom:1;触发hasLayout。
5	父元素浮动	无	只能解决一个问题，并触发其他问题
6	父元素display:table;	适合父元素宽度固定，想让若干个子元素平分宽度	布局不好控制，引发的问题更多，不建议使用
7	定位	可以实现页面效果	解决不了高度塌陷问题

（1、5、6、7从根本上算不上方法，不用在意）

具体详述hack2：

父级添加overflow属性（触发BFC），以及针对IE6兼容问题添加声明{zoom:1;}。

div{overflow: hidden; zoom:1;}

给父级（父元素或其他祖宗元素）添加overflow属性会触发父元素为BFC（BFC是块级格式化上下文，它有一条规则是：计算高度时，会计算浮动元素的高度）。
给父元素添加overflow：hidden；overflow：auto；overflow：scroll；都可以实现。但我们常用overflow：hidden；
因为auto属性值，如果内容超出，会显示滚动条，不超出则不显示；而scroll不管内容是否超出都会显示滚动栏，视觉效果上不好看。

具体详述hack3：

给浮动元素后面添加一个空标签（如：div、p、h3等）并且添加声明{clear：属性值；height：0；overflow：hidden；}

<div style="clear:both;height: 0;overflow: hidden;"></div>

注意点：（添加 height: 0; 和 overflow: hidden; 是为了避免这个空标签如果是 li 的话，在IE6和IE7上有默认高度撑着，所以要解决一下。)

具体详述hack4：

万能清除法之伪对象（伪元素）选择器 :after
给塌陷的元素添加

<div class="clearall"></div>

.clearall:after{content: " "; clear: both; display :block;height:0;overflow :hidden; visibility:hidden;
}
.clearall{zoom:1;}

注意点：
:after对于IE8以下有兼容问题，所以给塌陷的元素{zoom: 1; }
display: block; 因为content加进去的内容，类似添加了一个span，内容是横着排列的，那么就不会下来，也就不会把u1给撑开，所以要转成块元素竖着排列。
visibility: hidden;是为了隐藏content里面的内容。