当对某个标签使用浮动的时候，该块内容就会脱离文档流，其父元素便不再包裹该标签内容，父元素的高度会变成0，出现高度塌陷的问题。这个时候就要清楚浮动。
今天就来介绍一下css清除浮动的几种方法。
1. 在文档最后面新加一个空的div,如下
<div style="clear:both"></div>- 1
但是如果使用这种方法，添加了无意义的标签，违背了结构和表现分离的web结构精髓。后期难以维护。
2. 给浮动的元素添加overflow:auto/hidden
当给浮动的元素添加overflow:auto/hidden时，浮动的元素又会回到文档流，将容器撑起来。
3.让父元素也浮动
如果说父元素也需要清楚浮动，那就要让父元素的父元素也要浮动…..那整个页面都建立在浮动的基础上。
4.添加一个.clearfix,使用伪元素
.clearfix:after,
.clearfix:before{
content:"";
display: table;//防止当前盒子的margin-bottem与下一个盒子的margin-top叠加
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;//为ie6,ie7的兼容性设置
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11