clear在css中的用法是什么-前端问答-PHP中文网

clear在css中的用法是什么

WBOY

发布： 2022-04-15 15:24:19

原创

6515人浏览过

在css中，clear属性用于清除元素的浮动效果，该属性可指定段落的左侧或右侧浮动元素的效果；默认该属性的值为none，表示允许浮动元素出现在两侧，也可设置元素的左侧、右侧或左右两侧不能有浮动元素，语法为“元素{clear:属性值;}”。

clear在css中的用法是什么

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

clear在css中的用法是什么

css中clear的作用是清除元素的浮动效果。

clear属性指定段落的左侧或右侧不允许浮动的元素。

在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。

立即学习“前端免费学习笔记（深入）”；

不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

clear属性值：

eft 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。

Kuwebs企业网站管理系统3.1.5 UTF8
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描

1

查看详情
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
@@##@@
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</body>
</html>

登录后复制

输出结果：

clear在css中的用法是什么

（学习视频分享：css视频教程）