常用来清除两边浮动的CSS属性(常用来清除两边浮动的css属性是什
CSS清除float浮动的常用几种方法
一、浮动产生原因
简单地说,浮动是因为使用了float:left或float:right或两者都有而产生的浮动,导致样式缺失或者不正确显示等问题;
二、浮动产生负作用
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
??{clear:both;height:0;overflow:hidden;}

请问该如何清除DIV的浮动标签,就是溢出部分,CSS应该怎样写?
四种清除浮动方法如下:
1、使用空标签清除浮动。 我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用
元素还是空div/div可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,
本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空div比较合适。style type=”text/css”
!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clear{clear:both;}
–
/style
div id=”layout”
div id=”left”Left/div
div id=”right”Right/div
div class=”clear”
/div
/div
2、使用overflow属性。 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!也可以用overflow:hidden;”zoom:1″用于兼容IE6,也可以用width:100%。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;style type=”text/css”
!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; } /* overflow:auto可以换成overflow:hidden,zoom:1可以换成width:100%*/
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–
/style
div id=”layout”
div id=”left”Left/div
div id=”right”Right/div
/div
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。style type=”text/css”
!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–
/style
div id=”layout”
div id=”left”Left/div
div id=”right”Right/div
/div
4、浮动外部元素,float-in-float。这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。style type=”text/css”
!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;float:left;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–
/style
div id=”layout”
div id=”left”Left/div
div id=”right”Right/div
/div
div+css里的清除和浮动是什么意思?
“清除”就是clear这个属性的中文解释,“浮动”是float这个属性的中文解释。
清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。
浮动(float)则是控制元素在一行内的显示位置,例如float:left;就表示这个元素会显示在这一行的左边,如果是float:right则表示这个元素会显示在一行的右边。通常情况下,应用了float的元素,浏览器会认为它同时也意味着会与相邻的元素在同一行内显示,但是这个规则在IE6等浏览器里面并不会被严格执行,有时即使定义了float属性,浏览器还是默认认为这个元素是clear:both的,所以一般定义了float之后,还要定义一个display:inline;才可以实现多个元素在同一行内显示的效果。
CSS 清除浮动问题
clear是子模块之间限定的,如下:
div id="a"
div id="1"/div
div id="2"/div
/div
1和2之间,用clear来限定。
而overflow:hidden是父模块对子模块来用的。就是a对于1和2模块的限定。
clear非常好理解,主要是overflow:hidden不这么好理解,我发一篇文章给你看看,这个你看完就非常明白是什么意思了。(这是我看到的一篇文章,讲的最透彻的)
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。
一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。
div id="wai"
div id="nei"/div
/div
这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。
这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。
说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!
也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)
OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!
我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!
css清除浮动有关的代码,求解答
.fn-clear:after?{//利用伪类来清除浮动,减少代码
????content:?"?";//伪类必须要有的属性
????clear:?both;//清楚所有的浮动
????display:?block;//设置伪类为块状元素
????font-size:?0;//字体大小为0
????visibility:?hidden;//元素的状态为隐藏
????height:?0;//高度为0
????width:100%;//最好加个宽度100%
???}
.fn-clear?{
????zoom:?1;//ie上的属性,现在用的比较少了
}
css如何清除浮动常用的方法有哪些
最简单的是clear:both
需要在浮动元素后边加个元素。
有更好的方法也是我现在在用的
.fix { *zoom:1; }
.fix:after { content:" "; display:block; height:0; clear:both; visibility:hidden; font-size:0;}
给浮动元素的附加加上fix这个类就好了