清除浮动带来的额外影响
如果对于浮动不熟悉的同学,可以看看介绍float的文章。传送门:CSS float
我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题,现在已经有了很多的解决方案。针对每一个方案,我们来进行深度的剖析。
添加空块级元素
这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素。缺点就是多了一些没有意义的标签。代码如下。
//HTML <div class="content"> <div class="float"> </div> <div class="clearfix"></div> //用于清除浮动的元素必须是块级元素 </div> //CSS .content { background:pink;
}
.clearfix { clear: both;
}
.float { width: 50px; height: 50px; float: left; background: tan;
}
之所以可以使用clear属性清除浮动带来的额外影响,还要回归clear属性的本质。

