css的clear属性

html-css012

css的clear属性,第1张

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 属性的值)。

用在受影响的元素样式里,不过在有些情况下,用clear是达不到清除浮动效果的。

可以使用其他方法如:

如果是同级元素之间的影响,在影响的一方里加一个用于清除浮动的div,<div class="clear"></div>.class{clear:both}

如果是父子关系的元素之间的影响,在父元素的样式里加一个overflow:hidden

给被影响的,不需要浮动的元素加一个浮动来达到清除浮动的效果

这几种基本已经够用了

还有其他的方法,可以搜一搜