浮动
- 浮动脱离标准流,浮动的元素总是找离它最近的父级元素对齐,但不会超出内边距的范围。浮动的目的就是为了让多个块级元素同一行显示。
清除浮动
- 本质:为了解决父级元素因为子级浮动引起内部高度为0的问题。解决“高度塌陷”
清除浮动的方法
1. 额外标签法
在浮动元素末尾添加一个空标签
<div style="clear: both;"></div>
2. 父级添加overflow属性方法(BFC)
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
4. 双伪元素清除浮动(最推荐)
.clearFix:before, .clearFix :after {
content: " ";
display: table;
}
.clearFix:after {
clear: both;
}
.clearFix {
*zoom: 1;
}