当前位置:首页 > 开发 > Web前端 > Css > 正文

CSS清除浮动的4中方法

发表于: 2013-11-13   作者:IT独行者   来源:转载   浏览:
摘要: 清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s

清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。
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清除浮动的4中方法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录。 引用地址 : http://www.cnblogs.com
众所周知,CSS浮动在日常页面运用中起到非常重要的作用。 例如,我们可以利用浮动来实现多栏布局等
css清除浮动: 一、我们写html布局的时候经常使用float属性, 但是会发现一个问题,父元素撑不起来
开场白   我们平时工作中,很容易遇到浮动效果。一个DIV中嵌套多个DIV,左边显示一个DIV,右边显
两种情况 清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置cl
原文: CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流
浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。
1、盒子模型: 示意图(图片来自w3school): 说明:上图中,由内而外依次是 元素内容(content)
几种清楚浮动的方法: 1、设置空标签 2、父容器设置display: inline-block 3、父容器设置overflow值
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号