清除浮动
1.1 为什么要清除浮动
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为O，就影响了下面的标准流盒子。
1.2 清除浮动的方法
-
语法：
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动（清除左侧浮动） |
| right | 不允许右侧有浮动（清除右侧浮动） |
| both | 同时清楚两侧浮动的影响 |
1）.额外标签法
<div style="clear:both"></div>
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化差
2）.父级添加overflow属性
overflow为hidden|auto|scroll都可
- 优点：代码简介
- 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3）.使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加单签了
使用发法：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;}/*IE6、7专有*/
- 优点：符合闭合浮动思想结构语义化正确
- 缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout
- 代表的网站：百度、网易等
4）.使用双伪元素清除浮动
使用方法：
.clearfix:before, .clearfix:after {
content: "";
display : table;
}
.clearfix:after i
clear:both;
}
.clearfix i
*zoom: 1;
}
- 优点：代码更简洁
- 缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout
- 代表网站：小米、腾讯等
清除浮动总结：
1、父级没高度
2、子盒子浮动了
3、影响下面布局了，我们就应该清除浮动了
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方更加方便 | 添加许多无意义的标签，结构性差 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容问题 |