CSS中clear是干嘛用的?

CSS中clear是干嘛用的?,第1张

这个clear是相对float来作用的,一起说一下:
-------------------------------------------------------------
Float:定义元素的浮动方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。相对应的CSS属性是”float”。
Clear:不允许元素的浮动。left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。

1、所有元素(包括内联元素)浮动后都会自动变为块元素;
2、还是以你说的盆上浮木块的例子来说明:浮在水面上的三个木块互相之间肯定会有碰撞的不是吗?而沉在水底的铁块(即正常的文档流)则不会受木块的影响的。浮动,并不等于说就不存在了,只不过是飘在空中而已。就好比飞机飞在空中,对地面的交通不会造成影响,但如果没有空中管制,飞机互相之间也会碰撞的啊。你可以在普通的文档流上面想象存在另一个平行的文档流,而浮动的元素就在这个文档流中,这样你就好理解了。
3、清除浮动的最大作用,就是让文档流给浮动元素留出足够的空间,也就是说浮动元素在“空中”占用多大的空间,“地面上”就给它划出多大的预留空间,而后面的其他非浮动元素就在这个保留空间的后面继续排列,这样就不会被浮动元素挡住了(但是在清除浮动之前的非浮动元素仍然会被挡住的)。由于浮动元素会脱离文档流,因此难免会对后面的所有元素造成连锁反应(大家都往前移动了),所以有时候清除浮动是非常必要的。
补充说一下:浮动元素并非是完全脱离文档流,它与文档流之间仍然存在千丝万缕联系的。只有绝对定位(position:absolute)或固定定位(position:fixed)的元素,才是真正意义的脱离文档流。

你在CLEAR上下面写几个文字看看就知道了
如果不放CLEAR的话会在你的浮动左之后加上文字原本这里没有的现在有了加上浮动之后就很自觉的排下面去了不知道我这样子给你示范你明白不

好,废话不多说,我们知道有时使用了float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。下面我们来认识与学习css clear知识与用法。分为几点部分来讲;一、clear语法与结构:1、clear语法:clear : none | left|right| both
2、clear参数值说明:none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
3、clear解释:该属性的值指出了不允许有浮动对象的边情况,又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。4、css结构div{clear:left}
div{clear:both}二、clear常用到的地方:我们常常用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。三、代码的分析:我们先来设置一个css宽度(width)为500px;盒子,css边框(border)为红色,css背景(background)为黑色、padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,高度(height)为150px。这样我们来看看下面的代码,看浮动产生并使用clear清除浮动怎么使用。iszxw{width:500px;background:#000;border:1px solid #F00;padding:10px} iszxw_left,divcss5_right{ border:1px solid #FFF;background:#999;width:200px;height:150px } iszxw_left{ float:left}/ css注释: 设置浮动靠左 / iszxw_right{ float:right}/ css注释:设置浮动靠右 / 使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“iszxw”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/yw/13411572.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-31
下一篇 2023-07-31

发表评论

登录后才能评论

评论列表(0条)

保存