浮动布局
1. 浮动流是一种“半脱离标准流”的排版方式
浮动流只可设置水平排版，包括float:left和float:right两种方式。
注意: 1）浮动流中没有居中对齐这一功能；
2）浮动流会使块元素的margin：0 auto属性失效。

2. 在浮动流中不区分块元素，行内元素和行内元素
在浮动流中，无论你是块元素，行内元素还是行内元素都可以设置宽高。在标准流中，行内元素是无法设置高度的。

3. 浮动元素会脱标
1.元素在被设置浮动后，会脱离标准流。
2.如果前一个元素设置浮动，后一个元素没设置浮动，那么浮动元素会覆盖在未浮动的元素上。

红色块未设置浮动：

红色块设置浮动：


4.浮动的排序规则
4.1在同方向上，先浮动会显示在前面，后浮动会显示在后面。并且浮动元素不会覆盖住浮动元素。

三个块全部左浮动：


4.2左浮动会找左浮动，右浮动会找右浮动。

一号块和三号块左浮动，二号块和四号块右浮动：


4.3浮动元素浮动后的位置，由浮动之前在标准流中的位置确定，这也是浮动流被叫做“半脱离标准流”的原因。

一号块，三号块，四号块左浮动：


5.浮动的贴靠现象
当多个元素向同一个方向浮动时候，父元素会出现宽度不够的现象，那么后面的浮动会自动转入下一行(这个时候，父元素是没有高度限制的。)

当我们设是浮动时3号块是超出我们的body，这个时候3号块会自动换行，出现我们右面的形式。这个就是我们说的贴靠现象。


6.浮动元素的自字围现象。
当我们一个块里插入图片且设置图片浮动。当我们在块里写满文字，这个时候文字会贴着我们的图片，一行一行向下排列。图片并不会盖住文字。

7.浮动元素的高度问题
7.1在我们的标准流中，子元素的内容会撑起我们的父元素高度。
7.2我们的浮动元素因为脱离标准流的原因，它并不会撑起我们父元素的高度。
注意：这个点非常重要，我们设置布局一类，还有清除浮动时候都要注意我们的浮动元素不会撑起我们的父元素高度。

8.清除浮动
8.1给我们的第一个块设置高度，这样我们的第二个块就自动下来。但是在我们企业中不设置高度。
8.2设置我们的clear:both;clear:right;clear:left。
注意:1)clear:left是使我们当前的浮动元素不去找前面的浮动元素，而clear:right相反。
2)当我们使用clear属性后会使我们的margin失效。
在这里给大家补充一下父盒子塌陷的知识。
当一个父元素里面有一个子元素，我们给子元素设置margin-top时候，我们的父元素也会一起往下面来。
解决办法：1)我们给父元素设置一个border。
2)设置overflow:hidden。
8.3隔墙法。隔墙法分为我们的外墙法和内墙法。
8.3.1在我们的两个浮动的块元素之间再加一个块，并设置clear:both。
注意:当我们这样设置完成之后，会使我们的第一个盒子的margin-bottom失效；而且可以设置我们第二个盒子的margin-top。
8.3.2内墙法:在第一个块级元素之后添加一个div块并设置clear:both。
注意:外墙的我没有办法撑起我们第一个盒子的高度。
8.4给第一个盒子设置overflow:hidden
这个方法我个人觉得是创建BFC。还希望大家指点！谢谢！

8.5伪元素清除浮动！！！
在清除浮动的时候我们极力推荐这种方式。这个是通过修改我们的CSS样式来实现，完全符合我们当下的环境应用。

div::after{
content=" ";              /*设置我们的后面的内容为空*/
display:block; /*设置我们后面的是块*/
height:0; /*设置我们的高度是0*/
visibility:hidden;     /*设置我们的添加元素不可见*/
clear:both;
}
/*在我们在IE6运行时会出现我们的兼容性问题，这个时候需要我们添加一段代码，来适应兼容性。*/
div{
*zoom:1;
}