CSS float

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

借用CSS浮动float详解的观点,float两个特性

• 特性一：包裹性
  一旦让该block元素浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因）
• 特性二：高度欺骗
  下面的demo，上边框红色，下边框蓝色

Demo-清除浮动-高度欺骗

我这里额外备注一个特性就是 脱离文档流

这个额外说一个图片文字环绕的问题，大家经常看到一张图片，然后文字环绕，那么文字和图片的边距是通过图片来设置的，你设置段落是完全没有作用的，至于为什么，

demo-浮动-margin

那是因为图片是潜在p里面的

浮动元素可能引起的问题

1. 父元素的高度无法被撑开，影响与父级元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构

因为上面我们就会出现一些列清除浮动的方法，我们先看下面一个demo,也是我们最为常见清除浮动的方法之一

Demo-清除浮动

最常见的

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

升级版1，零宽度空格

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { zoom:1; }.

升级版本2,原文:A new micro clearfix hack

.cf:before,.cf:after {
    content:"";
    display:table;
}
.cf:after { clear:both; }
.cf { zoom:1; }

CSS浮动float详解
那些年我们一起清除过的浮动
CSS浮动，你不知道的事
CSS float浮动的深入研究、详解及拓展
清除浮动最好的两种方式
CSS清除浮动_清除float浮动