css的clear的作用,css的clear属性

http://www.itjxue.com  2023-01-07 17:47  来源:未知  点击次数: 

css的clear属性

clear 属性规定元素的哪一侧不允许其他浮动元素

在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

html

head

style type="text/css"

img

{

float:left;

clear:both;

}

/style

/head

body

img src="1.png" /

img src="2.png" /

/body

/html

CSS中clear是干嘛用的?

这个clear是相对float来作用的,一起说一下:

-------------------------------------------------------------

Float:定义元素的浮动方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。相对应的CSS属性是”float”。

Clear:不允许元素的浮动。left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。

clear:both;在css中起什么作用

clear:both;在css中,首先我们理解一下clear,顾名思义就是清除的意思,both的意思是全部,那连起来就是清除全部样式,不过这个样式主要是用于对多个div浮动的清除,如float:left,如果不清除,很容易对下面的div造成显示错位,通过代码来理解下:

html

head

style

.keepbj{ //通过class来设置

width:100px;

height:50px;

border:1px solid #f00;

}

#div1{

float:left;

width:40px;

height:50xp;

}

#div2{

float:lleft;

width:30px;

height:50px;

}

#div3{

clear:both; //div3就不受float的影响。

width:30px;

height:30px;

}

/style

/head

body

div class='keepbj'

div id='div1'我会在左边/div

div id='div2'我会在右边/div

/div

div id='div3'

我不会受flaot的影响。

/div

/body

/html

css中clear的什么作用?

css中clear的作用是清除元素的浮动效果。left 在左侧不允许浮动元素。right 在右侧不允许浮动元素。both 在左右两侧均不允许浮动元素(这时该元素会独占一行了)。

注:对第一个元素设置clear,对其后面元素不起作用。

CSS规则"clear: both"有什么作用?

clear属性用来指定的浮动元件不允许浮动该哪一侧;它设置或返回元素相对于浮动对象的位置。而"clear: both"用于设置在左右两侧均不允许浮动元素。

原文地址: CSS规则"clear: both"有什么作用?

当不需要与指定元素相关的任何元素在左右浮动,并且仅在下面显示时,就可以使用该"clear: both"规则。该规则还表明没有其他元素占用左右两边的空间。

语法:

示例:

效果图:

浏览器支持:

● Google Chrome

● Internet Explorer

● Firefox

● Opera

● Safari

推荐阅读:

java基础教程

layui框架

go语言教程

(责任编辑:IT教学网)

更多

推荐Flash实例教程文章