CSS清除浮动的4中方法

原文地址：http://www.uncletoo.com/html/html5/543.html

清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。

CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。

1、结尾处加空div标签 clear:both

1 2 3 4

.div 1 { 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 也一起浮动

1 2 3

.div 1 { 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

这个方法其实我还是蛮常用的，主要用在那些可以确定高度的元素上，感觉使用上很方便。但是那些需要自适应高度的就不适合了。

1 2 3

.div 1 { 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

这个方法也是我平时比较喜欢用的，感觉还挺好用的。

可以定义一个通用类选择器，然后反复使用：

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

刚用这个的时候，还不知道content属性是干嘛的，后来查了下是这么解释的：

content配合before和：after伪类一起使用，用于插入内容。

小小举个例子，简单写一下：

a:after{content:"aaa";}

<p><a href="#" target="_blank" rel="external nofollow" target="_blank" target="_blank" target="_blank" target="_blank">AAA</a></p>

最后的显示结果是AAAaaa

1 2 3 4 5

.div 1 { 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 : "" ；}

更多前端技术，请登录http://www.uncletoo.com