CSS 浮动

1浮动

1.1 为什么需要浮动？

1.2 什么是浮动？

1.3 浮动的特性

2 清除浮动

2.1 为什么需要消除浮动？

2.2 清除浮动

清除浮动的策略是：闭合浮动

选择器｛claer:属性值;｝

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响（主要使用它）

2.3 清除浮动方法

2.3.1 额外标签法

 原理：在最后一个浮动的盒子添加块级盒子。

2.3.2 父级添加overflow

2.3.3 ：after伪元素法

 :after 方式是额外标签法的升级版，也是给父元素添加下列代码。

.clearfix:after{
    content: '';
    display: block;   height: 0;
    clear: both;
    visibility: hidden;
}
/*IE6、7专有*/
.clearfix{
    *zoom:1;
}

 代码说明

1. 优点：没有增加标签，结构更简单
2. 缺点：照顾低版本浏览器

2.3.4 双伪元素清除浮动

 也是给父元素添加代码。
 原理：在浮动盒子前后添加块级盒子限制。

.clearfix:before, .clearfix:after{
   content: '';
     /*为了让限制的两个盒子在一行上显示*/
     display: table; //转换为块级元素并在一行显示
 }
 .clearfix:after{
     clear: both;
 }
 /*IE6、7专有*/
 .clearfix{
     *zoom:1;
 }