清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。
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" 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 : "" ;}
|
相关推荐
css中3种清除浮动方法css中3种清除浮动方法
清除CSS浮动 CSS清除浮动_2种方法源代码.zip
css清除浮动大全--------共8种方法
div+css清除浮动
做xhtml+css页面重构的人员很注重的一点就是浮动,而浮动最头痛的就是如何清除。文件是我整理的3种清除浮动的方法,3种方法各有优缺点,页面重构师需要结合使用
css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。...
CSS技术:清除浮动的最优方法.pdf
具体详细的阐述了css浮动如何解决和浮动产生的原因。
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助。...
从别人博客看来的,整理成了PPT,分享下吧,感觉挺好懂的
如何清除浮动?css清除浮动的方法有很多,下面为大家介绍下常用的3种,需要的朋友可以了解下
主要为大家详细介绍了CSS清除浮动的常用方法优缺点,分析很全面,感兴趣的小伙伴们可以参考一下
主要介绍了css清除浮动的几种方法和示例,需要的朋友可以参考下
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。方法真的很简单,只要为需要清...
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...
主要介绍了css清除浮动的几种方法以及对应规范说明,需要的朋友可以参考下
CSS 浮动清除的新方法,一般大家用空的div设置下clear 高度超出隐藏即可,下面的方法也非常值得参考下。
4、 回答,如何清除浮动以及常用的几种方法 5、 结论,得出本文认为最好用的方法 三、 正文 1、 浮动本来的意义 浮动的意义原本仅是用来让文字环绕在图片周围而已。 通过上图可以看到,设置图片左浮动可以将图片从...
分析:清除浮动大致有两种方案:clear、触发 BFC额外标签法: 在浮动元素平级的最后面添加额外元素,例如:<div class="clearfix"></d