如何利用伪元素:after清除浮动父元素的高度为0-创新互联

这篇文章主要讲解了“如何利用伪元素:after清除浮动父元素的高度为0”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用伪元素:after清除浮动父元素的高度为0”吧！

成都创新互联服务项目包括安乡网站建设、安乡网站制作、安乡网页制作以及安乡网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，安乡网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到安乡省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。

代码如下:

#content{background:#000;}
.left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;}

 
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动

代码如下:

但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：

代码如下:

#content:after{content:"";display:block;clear:both;}

 
该方法在 ie6、7 中无效，需要对 #content 设置 zoom:1。

感谢各位的阅读，以上就是“如何利用伪元素:after清除浮动父元素的高度为0”的内容了，经过本文的学习后，相信大家对如何利用伪元素:after清除浮动父元素的高度为0这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章题目：如何利用伪元素:after清除浮动父元素的高度为0-创新互联
URL地址：http://cdxtjz.com/article/ceeoje.html