一、浮动定义：会强制改变display为inline-block，使元素排队列，（排列方式由属性值决定，left / rihgt）， 使该元素处于半脱离文档状态

二、浮动元素处于半飘离状态，能看到浮动元素的主要有文字和具有inline属性的元素，所以由此引发 一个问题，和一个应用

　　（1）一个问题：父容器无法看到子级浮动元素

　　　　　　解决方法：

　　　　　　　　方法一：出发css hack，改变渲染规则，常见的方法如下：

　　　　　　　　　　　　overflow:hidden;

　　　　　　　　　　　　position: absolute;

　　　　　　　　　　　　display: inline-block;

　　　　　　　　方法二（最标准方法）：after伪元素清除浮动（注意：ie6，7 不兼容伪元素的处理, *ie6、7能识别，_仅ie6能识别）

<div class="wrapper">        <div class="content"></div>        <div class="content"></div>        <div class="content"></div>    </div>

.wrapper {    width: 1000px;    background-color: pink;    *zoom: 1; /*解决ie6、7不兼容伪元素的问题*/}.content {    float: left;    width: 200px;    height: 200px;    background-color: orange;}

　　（2）一个应用：实现图片的文字环绕效果

　　正常文字是和图片的底部对齐，通过设置图片float可以让文字从图片顶部开始对齐，实现文字包围环绕图片的效果，像报纸上排版类似

<img src="p1.jpg">

img {    float: left; /*或right*/          }

浮动float