一、float属性介绍

1.普通流介绍

css定位机制：普通流、浮动、绝对定位

普通流：元素默认从左往右从上往下的排列。

块元素：独占一行，可以设置宽高，如果不设置宽度、宽度默认为容器的100%，div p h1-h6 ul ol li dl dt dd

行内元素：与其他元素同行显示，不可以设置宽、高，宽度就是文字和图片的高度，span a b i u em

2.浮动的基础知识

会使元素从左往右移动，只能左右，不能上下。

浮动元素碰到包含框或另一个浮动框、浮动停止。

浮动元素之后的元素将围绕他，之前的不受影响。

浮动元素会脱离标准流。

3.浮动的基本语法

float:left   float:right   float:none

4.清除浮动的常用方法

4.1在浮动元素后使用一个空元素

例如 

.clear{clear:both;}

<div class="clear"></div>

4.2给浮动元素的容器添加overflow：hidden；

*zoom:1; 触发haslayout,兼容ie6,7

4.3使用css3的after伪元素

.clearfix:after{

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;}

.clearfix{

*zoom:1;}

5.使用浮动后产生的问题

元素使用浮动后会脱离普通流，出现高度塌陷（浮动溢出）

6.清除浮动的语法

clear：none/left/right/both;

7.清除浮动的其他方法

父级元素定义高度，只适合高度固定的布局

父级元素一起浮动。不推荐，会产生新的浮动问题