整 理：徐秀、晋哲 时 间：2015-10-23 说 明：float浮动原理、用法、清浮动方法一、什么是float
float是在传统的印刷布局中，使文本可以按照需要围绕图片的布局方式。一般把这种方式称为“文本环绕”。浮动的元素仍然是网页流的一部分。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。故而浮动框会影响相邻的元素样式表现。二、float应用
float的可用值：1.图文环绕的浮动效果。 设置img{float:right;}
2.替代无表格的首页布局 .sidebar{float:left;width:200px;...} main{margin-left:200px;...}
3.创建水平菜单栏 设置li{float:left;...}的效果。
设置li{display:inline-block;...}的效果。
4.创建段首字母悬浮于左侧
三、float的影响。
1.无法撑开父级的高度。 2.影响同级非浮动元素样式的表现。 3.ie6中float元素双边距bug。四、 float的清除方法。
1. 清除对父级高度的影响 1.1. 指定父级高度。【不推荐】 1.2. 为父级渲染BFC(块级格式化上下文)【推荐，具体方法，量情况而定】 1.2.1. 父级overflow不为visible；可为（auto/hidden） 1.2.2. 父级设置display:inline-block/table-cell/table-caption/ flex/inline-flex; 1.2.3. 父级也设float 。 1.2.4. 父级设置绝对定位；position:absolute; 1.3 父级定义伪类:after;并设置父级zoom:1【推荐，某宝就使用的该方法】 way1: .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfix{zoom:1} way2: .cf:before, .cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {zoom:1;} 2. 清除对同级非浮动元素影响 2.1 为后面的非浮动元素添加“clear:both;”【推荐】 2.2 在浮动元素后面添加一个空的div，样式设置为clear:both;”【不推荐】 3. 清除IE6下的双边距bug。 问题描述：如果给元素设置了float，并设置了水平方向的margin【比如margin-left:100px】，会IE6下会出现margin-left:200px的显示效果。 解决方法：设置浮动元素的display:inline-block.
