不得不说float是件很恶心的事情，最开始学习布局时利用各种各样的float，最后搞的晕头转向。现在发现，一个好的网页制作使用float越少它的后续可开发性越高。但使用float时不可避免的，现在就说一说float那点事。

    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

    文档流是相对于盒子模型讲的；文本流是相对于文子段落讲的。元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。这就是文本环绕原因。但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

浮动元素与block,inline,inline-block元素重叠显示顺序

（1）block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

（2）inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

清除浮动方法

（1）  给父盒子加高度

使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算。

（2）  父设置overflow：hidden

原因？因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

（3）  clear:both

新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。

（4）使用:after 伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

.clearfix:after{

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden; 

  }

.clearfix {

  /* 触发 hasLayout */

  zoom: 1;

  }

总结：

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用clear both清除浮动。

css之浮动