浮动与清除浮动

行内元素、行内块元素、块级元素的相互转换

display：

      -inline-block； 行内块 vertical-aling:top顶端对齐

           缺点：基线对齐问题、间隙、只能从左向右排序

       -inline 行内

          不可以设置宽高、间隙、基线对齐问题、只能从左向右排布

       float浮动

        -left 左浮动

        -right 右浮动

        -none 去掉浮动

浮动的特点

- 脱离文档流（父级找不到子级），相当于来到了第二层级，平行默认文档流

- 在不设置宽高是，宽高是由内容决定的

- 所有的元素都可以设置css浮动这个属性，无论img,a,span,div...

（给元素设置了浮动这个属性，这个元素相当于行内块级元素）

清除浮动

- 给父级设置一个高度

-不管子级元素有没有内容，父级高度是固定的

- 给父级元素设置一个css属性overflow:hidden;

- 把子级元素拉回文档流内

- 在浮动元素之后加clear:both;清除浮动

（使用clear:both必须保证3个前提

1. 使用这个属性的元素必须是块级元素；

2. 使用这个属性的元素必须放在所有浮动元素的后面

3. 使用这个属性元素不能带有float属性）

- 利用伪元素来清除浮动

.clear:after{

display:block;

content:"";

clear:both;/* 清除浮动*/

}

.claer{

*zoom:1;.//兼容低版本浏览器

}