定义和用法float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围...
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
借用CSS浮动float详解的观点,float两个特性
- 特性一：包裹性
一旦让该block元素浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因） - 特性二：高度欺骗
下面的demo，上边框红色，下边框蓝色
我这里额外备注一个特性就是 脱离文档流
这个额外说一个图片文字环绕的问题，大家经常看到一张图片，然后文字环绕，那么文字和图片的边距是通过图片来设置的，你设置段落是完全没有作用的，至于为什么，
那是因为图片是潜在p里面的
浮动元素可能引起的问题
- 父元素的高度无法被撑开，影响与父级元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构
因为上面我们就会出现一些列清除浮动的方法，我们先看下面一个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浮动
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
