清除浮动带来的额外影响

如果对于浮动不熟悉的同学,可以看看介绍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属性的本质。

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式