css中clear的什么作用？

html-css023

css中clear的什么作用？,第1张

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

注：对第一个元素设置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>

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

clear有四个属性值，分别是left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）、none（默认值。允许浮动元素出现在两侧）、inherit（规定应该从父元素继承 clear 属性的值）。