清除浮动
目的
- 为了解决父级元素因为子级浮动引起的内部高度为零的问题
清除浮动的方法
1、额外标签法(在最后一个浮动标签后,新加一个标签,给其设置 clear:both;)(不推荐)
<div class="clear"></div>
.clear {
clear: both;
}
- 原因: 如果我们清除了浮动,父元素自动检测子盒子最高的高度,然后与其同高。
- 优点:通俗易懂,方便
- 缺点:添加无意义标签,语义化差
2、父级添加 overflow 属性(父元素添加 overflow:hidden)(不推荐)-->通过触发 BFC 方式,实现清除浮动
.clearfix {
overflow: hidden;
}
- 优点:代码简洁
- 缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
3、使用 after 伪元素清除浮动(推荐使用)
.clearfix:after {
content: "."; /* 内容为小点,尽量加不要为空,否则旧版本的浏览器有空隙*/
display: block; /* 转换为块元素*/
height: 0; /* 高度为零*/
visibility: hidden; /* 隐藏盒子*/
clear: both; /* 清除浮动*/
}
.clearfix {
*zoom: 1; /*兼容ie6/7*/
}
- 优点:符合闭合浮动思想,结构语义化正确
- 缺点:ie6-7 不支持伪元素:after,使用 zoom:1 触发 hasLayout.
4、使用 before 和 after 双伪元素清除浮动(强烈推荐使用)
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼容ie6/7*/
}
- 优点:代码更简洁
- 缺点:用 zoom:1 触发 hasLayout.
- 总结: 这两种方法(双伪元素和单伪元素)是目前最常用的清除浮动的方法,推荐使用双伪元素清除浮动。