您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

CSS清除浮动的4中方法

作者:  来源:互联网  日期:2013-11-03 15:21:37
收藏  评论:( 0 )  阅读:2123

清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。
CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。

1、结尾处加空div标签 clear:both
.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}

这种方法,感觉之前大家用的比较多。但是无缘无故多出一个空的div,而且浮动越多就要不断加div,让我感觉很忧伤,所以我不太喜欢用。
2、父级div 也一起浮动

.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

这个方法我记得我是在学校的时候,看老外的CSS书时看到的,当时觉得很好用,但是现在觉得最好还是别用了,有时真的会很麻烦。
因为父级的元素一浮动,又会产生其他元素的浮动问题,不信你可以试试。
3、父级div定义 height
这个方法其实我还是蛮常用的,主要用在那些可以确定高度的元素上,感觉使用上很方便。但是那些需要自适应高度的就不适合了。

.div1{background:#000080;border:1px solid red;height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

4、父级div定义 伪类:after 和 zoom
这个方法也是我平时比较喜欢用的,感觉还挺好用的
可以定义一个通用类选择器,然后反复使用:

.clear{zoom:1}
.clear:after{display:block;clear:both;content:"";}

刚用这个的时候,还不知道content属性是干嘛的,后来查了下是这么解释的:
content配合before和:after伪类一起使用,用于插入内容。
小小举个例子,简单写一下:

a:after{content:"aaa";}
<p><a href="#" target="_blank" target="_blank" target="_blank" target="_blank">AAA</a></p>
最后的显示结果是AAAaaa

.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{zoom:1}
.clear:after{display:block;clear:both;content:"";}




CSS
 
浮动
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/543.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论