CSS浮动的使用与清除

浮动的特点
1）脱离标准流，不占位置（自己原来的位置漏给后面的标流）
2）浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
3）任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

浮动与兄弟盒子的关系
标准流–占有位置 浮动— 不占位置(脱标)
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

浮动元素与父盒子的关系

• 浮动的元素压不住父亲的边框
• 浮动的元素压不过父亲的padding
• 后面学的定位可以随便压

浮动的简单应用

（1）让多个块级元素水平排列在一行（这里将行内元素转换为了块级元素）

1 2 3

（2）添加浮动

（3）一个左，一个右

清除浮动

清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。
子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。

1）额外标签法
在最后一个加了浮动元素的末尾添加一个块级别的空标签。

--- 这个空标签一定是块元素.

缺点：结构容易乱。

2）给浮动元素的父亲添加overflow属性方法
overflow:hidden;
缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。

3）after伪元素清除浮动

.clearfix:after {
/* 使用伪元素必须添加content属性 /
content: “”;
/ 因为伪元素是行内元素，所以需要转换成块元素 /
display: block;
/ 兼容 /
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/ IE6、7 专有 */
*zoom: 1;
}

4）双伪元素清除浮动(推荐)

.clearfix::before,