clear属性指定段落的左侧或右侧不允许浮动的元素。
注意:clear 属性定义了元素的哪边上不允许出现浮动元素。如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
clear:none|left|right|both|inherit;
值 | 说明 (索引中有详细介绍) |
none | 默认值。允许浮动元素出现在两侧。 |
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style type="text/css">
img
{
float:left;
}
.clear
{
clear:both;
}
</style>
</head>
<body>
<img src="../img/logo.png" />
<p>NTHOME</p>
<p class="clear">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi mollitia quam quia voluptatum. Consectetur dolores fugiat incidunt laudantium maiores minima molestiae repellendus sapiente, vel voluptate. Dolore dolorum illo nulla pariatur?</p>
</body>
</html>
NTHOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi mollitia quam quia voluptatum. Consectetur dolores fugiat incidunt laudantium maiores minima molestiae repellendus sapiente, vel voluptate. Dolore dolorum illo nulla pariatur?
表格中的数字表示支持该属性的第一个浏览器版本号。
Safari | Chrome | FireFox | IE |
1.0 | 1.0 | 1.0 | 5.0 |