目录
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;
}
代码说明
- 优点:没有增加标签,结构更简单
- 缺点:照顾低版本浏览器
2.3.4 双伪元素清除浮动
也是给父元素添加代码。
原理:在浮动盒子前后添加块级盒子限制。
.clearfix:before, .clearfix:after{
content: '';
/*为了让限制的两个盒子在一行上显示*/
display: table; //转换为块级元素并在一行显示
}
.clearfix:after{
clear: both;
}
/*IE6、7专有*/
.clearfix{
*zoom:1;
}